/* ============================================================
   The Navigational Way — site styles

   One stylesheet for every page. Change something here and it
   changes everywhere at once; that is the whole point of keeping
   it in its own file rather than inside each page.
   ============================================================ */

/* ---- 1. The palette, kept in one place -------------------------------
   Custom properties (the --names) are just variables. Change a colour
   here and it changes everywhere it is used below. */
:root {
  --paper: #faf8f4;   /* warm off-white, easier on the eye than pure white */
  --ink:   #23201c;   /* near-black; true black is harsh on a light page */
  --quiet: #6b6459;   /* for the smaller, less important text */
  --rule:  #ddd6c9;   /* hairlines */
}

/* ---- 2. Page basics -------------------------------------------------- */
body {
  background: var(--paper);
  color: var(--ink);

  /* A serif for long-form reading. The browser walks this list until it
     finds a font the reader actually has installed — no web fonts to
     download, so the page appears instantly. */
  font-family: Iowan Old Style, Palatino, Georgia, serif;

  font-size: 1.125rem;   /* ~18px, a comfortable reading size */
  line-height: 1.65;     /* generous space between lines */

  /* The two lines that do most of the work: cap the text width, then
     centre it. Somewhere near 60–70 characters per line is where prose
     is easiest to read. `ch` is the width of a "0", so 34rem lands about
     there. `auto` side margins do the centring. */
  max-width: 34rem;
  margin: 0 auto;
  padding: 4rem 1.5rem 6rem;   /* top, sides, bottom breathing room */
}

/* ---- 3. The title ---------------------------------------------------- */
/* The site name, set small and wide. Used as the front page's <h1> and as a
   quiet link back home from every other page. */
.nameplate {
  font-size: 1rem;         /* deliberately small — a nameplate, not a shout */
  font-weight: normal;
  letter-spacing: 0.18em;  /* wide spacing makes small capitals feel calm */
  text-transform: uppercase;
  color: var(--quiet);
  text-decoration: none;
  display: block;
  margin: 0 0 3rem;
}
a.nameplate:hover { color: var(--ink); }

/* A chapter title. Larger than the nameplate, because on a chapter page the
   chapter is the subject and the site name is just orientation. */
h1 {
  font-size: 1.9rem;
  font-weight: normal;
  line-height: 1.25;
  margin: 0 0 2rem;
}

/* Subheadings inside a chapter. Space above separates sections; the smaller
   size and colour keep them from competing with the chapter title. */
h2 {
  font-size: 1.15rem;
  font-weight: normal;
  font-style: italic;
  color: var(--quiet);
  margin: 2.75rem 0 1rem;
}

/* ---- 4. Paragraphs --------------------------------------------------- */
p {
  margin: 0 0 1.5rem;   /* space below each paragraph, none above, so the
                           gaps never double up */
}

/* A class is a label you attach in the HTML with class="lead".
   The dot means "any element carrying this label". */
.lead {
  font-size: 1.5rem;
  line-height: 1.4;
  margin-bottom: 2rem;
}

/* The turning line, set apart by space and a hairline rather than by
   decoration. */
.turn {
  margin: 3rem 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--rule);
  font-style: italic;
}

.start {
  color: var(--quiet);
  margin-bottom: 2.5rem;
}

/* ---- 5. The list of sections ----------------------------------------- */
/* <nav> is a landmark element: it tells screen readers and search engines
   "this is navigation", which a plain <div> would not. */
nav ul {
  list-style: none;   /* no bullets */
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
nav li {
  border-bottom: 1px solid var(--rule);
}
nav a {
  /* Flex lays the row's children out in a line and lets us control the
     gap between them. `align-items: center` vertically centres the label
     against the picture. */
  display: flex;
  align-items: center;
  gap: 1rem;

  padding: 0.75rem 0;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-transform: uppercase;
}
nav a:hover,
nav a:focus {
  color: var(--quiet);
}

/* The thumbnail. Width and height are also set on the <img> tag itself so
   the browser reserves the space before the picture loads and the page
   doesn't jump. */
nav img {
  width: 44px;
  height: 44px;
  flex-shrink: 0;          /* never let a long label squash the picture */
  border-radius: 3px;      /* change to 50% for circles */

  /* Crops the picture to fill the square instead of squashing it, so
     photos of any shape still look right. */
  object-fit: cover;

  background: var(--rule); /* a soft square shows if an image is missing */
}

/* ---- 6. Small screens ------------------------------------------------ */
/* A media query applies its rules only when the condition is true —
   here, phones and narrow windows. */
@media (max-width: 30rem) {
  body { padding-top: 2.5rem; font-size: 1.0625rem; }
  .lead { font-size: 1.3rem; }
}

/* ---- 7. Chapter page furniture ---------------------------------------- */

/* The line at the foot of a chapter: where you came from, where you go next.
   `justify-content: space-between` pushes the two links to opposite ends. */
.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pager a {
  color: var(--quiet);
  text-decoration: none;
}
.pager a:hover { color: var(--ink); }

/* When there is no previous page, an empty span still holds the left-hand
   slot so "next" stays on the right where the reader expects it. */
.pager span { visibility: hidden; }

footer {
  margin-top: 3rem;
  color: var(--quiet);
  font-size: 0.8rem;
}

/* The contact address in the footer. Without this it would take the browser's
   default link colour — bright blue on warm paper. `inherit` hands it the
   footer's own quiet grey, so it reads as part of the credit line and the
   underline alone says it is clickable. */
footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rule);
}
footer a:hover { text-decoration-color: var(--quiet); }

/* ---- 8. Elements the chapter text brings with it ---------------------- */

/* Lists. Bullets/numbers sit in the margin (`outside`) so the text stays
   aligned with the paragraphs above it. */
ul, ol {
  padding-left: 1.4rem;
  margin: 0 0 1.5rem;
}
li { margin-bottom: 0.6rem; }

/* A list of links where each carries a description underneath. No bullets and
   no numbers — the link text is the marker. `padding-left: 0` pulls the items
   back flush with the paragraphs, since with markers gone there is nothing for
   the indent to make room for. */
.maps { list-style: none; padding-left: 0; }
.maps li { margin-bottom: 1.25rem; }
.maps .note { display: block; margin-top: 0.15rem; line-height: 1.5; }

/* The sub-line under a numbered item — a tool's description, say. */
.note { color: var(--quiet); font-size: 0.95rem; }

/* Tables in a working paper. Hairlines only — no fills, no zebra striping,
   nothing the rest of the site doesn't do. The wrapper scrolls sideways on a
   narrow screen so the page body itself never does. */
.tablewrap { overflow-x: auto; margin: 1.8rem 0; }
table { border-collapse: collapse; font-size: 0.92rem; line-height: 1.45; }
th, td {
  border-bottom: 1px solid var(--rule);
  padding: 0.5rem 1.1rem 0.5rem 0;
  text-align: left;
  vertical-align: top;
}
th { font-weight: 600; border-bottom-color: var(--ink); white-space: nowrap; }

/* Sub-headings inside a working paper. Smaller than h2 and not italic, so a
   long report reads as two levels rather than one. */
h3 { font-size: 1rem; font-weight: 600; margin: 2rem 0 0.6rem; }

/* A note inside a working paper marking something derived in conversation
   rather than brought by the author. A hairline in the margin rather than a
   tinted box — the site has no boxes — so the reader can see at a glance which
   claims are which without the page acquiring furniture. */
.derived {
  border-left: 2px solid var(--rule);
  padding-left: 1.1rem;
  margin-left: 0;
}

/* The chant itself, set out to be looked at rather than read past. Larger than
   the prose and centred — the one place on the site where something is meant to
   stop the eye. `letter-spacing` opens the words slightly so the seven of them
   read as separate beats instead of a sentence. No box and no rule: the size
   and the space around it are doing the work. */
.chant {
  font-size: 1.5rem;
  line-height: 1.5;
  text-align: center;
  letter-spacing: 0.02em;
  margin: 2.2rem 0;
}

/* The articulation lines — the seven Resident lines, and the sequence. Each
   line is its own statement, so they are separated by <br> inside one <p>
   rather than made into a list: a list would number them and imply an order
   of importance the house does not have. Indented to the same 1.1rem as the
   hairline elements, so the left edge of the page stays consistent. */
.articulation {
  padding-left: 1.1rem;
  line-height: 2;
}

/* A quotation lifted from another document. Same hairline idea, set in italic. */
blockquote {
  margin: 1.5rem 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--rule);
  font-style: italic;
}
blockquote p { margin: 0; }

/* The status line on a working paper: when it was written and where it stands.
   Smaller and quieter than the prose, because it is metadata about the page
   rather than part of the argument. */
.status {
  font-size: 0.85rem;
  color: var(--quiet);
  line-height: 1.7;
}

/* A section break. Browsers draw <hr> as a grooved 3D bar by default, which
   is exactly the sort of decoration this site avoids — so `border: 0` wipes
   that away first and a single hairline is drawn back on top. The wide
   margins do the real work: on a text-led page the space says "new section"
   more than the line does. */
hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3.5rem 0;
}

figure, img { margin: 2rem 0; }
img { max-width: 100%; height: auto; }   /* never wider than the column */

/* Links inside running text: underlined, because in a wall of prose colour
   alone is not a reliable signal — and is invisible to colour-blind readers. */
p a, li a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--rule);
}
p a:hover, li a:hover { text-decoration-color: var(--ink); }

/* The block of PDF/podcast links that sat in the old site's sidebar. Set
   apart and quieter than the chapter itself. */
.extras {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.9rem;
}
.extras ul { list-style: none; padding-left: 0; }

/* Group headings inside a long list — one level below <h2>, so the page still
   reads as a proper outline rather than three sizes of shouting. */
h3 {
  font-size: 0.85rem;
  font-weight: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--quiet);
  margin: 2.5rem 0 1rem;
}

.extras-visit {
  margin-top: 3rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

/* ---- 9. The invitation on the front page ------------------------------
   The one thing the page asks of a visitor, so it gets space around it and
   a rule above rather than a box — quieter than a button on a card, and it
   still cannot be missed, because nothing else on the page is asking. */
.invite {
  margin: 3.5rem 0 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
}
.invite-lead {
  color: var(--quiet);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.invite-q {
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: 1.5rem;
}
/* Padding and a border make the link a target you can hit on a phone;
   `inline-block` is what lets a link take padding at all. */
.invite-go {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  border: 1px solid var(--ink);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.95rem;
}
.invite-go:hover { background: var(--ink); color: var(--paper); }


/* ---- 10. The front page's photograph -----------------------------------
   Only index.html carries `class="home"` on its <body>, so none of this
   touches the library chapters, which share this stylesheet. The hero is
   full-bleed, so the reading column moves from <body> onto .page. */
body.home { max-width: none; padding: 0; }
body.home .page { max-width: 34rem; margin: 0 auto; padding: 0 1.5rem 6rem; }

.hero {
  position: relative;
  display: block;
  margin: 0 auto 3rem;
  text-align: center;
}
/* the photograph itself — never cropped, never stretched, always centred */
.hero img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 72vh;
  width: auto;
  height: auto;
}
.hero .nameplate {
  position: absolute;
  left: 0; right: 0;
  top: 50%; transform: translateY(-50%);
  color: #fff;
  font-size: clamp(1.15rem, 4.4vw, 1.9rem);
  letter-spacing: 0.2em;
  margin: 0; padding: 0 1.2rem;
  text-align: center;
  text-shadow: 0 1px 6px rgba(0,0,0,.85), 0 1px 28px rgba(0,0,0,.55);
}


/* ---- 11. Photographs on the prose pages -------------------------------
   The chapters share the reading column, so the picture breaks out of it:
   100vw wide, pulled back by half the difference. `width:auto` with a
   max-height keeps the whole photograph visible and centred, never cropped. */
body { overflow-x: hidden; }          /* the 100vw trick can otherwise show a scrollbar */
.hero--bleed { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.hero--bleed img { max-height: 56vh; }
@media (max-width: 30rem){ .hero--bleed img { max-height: 40vh; } }