/* ==========================================================================
   site.css  --  VERSION 4  --  2026-09-07

   HOW TO CHECK YOU HAVE THE RIGHT FILE:
   open michaelperry.org/site.css and look at this line. If it does not say
   VERSION 4, the browser or the server is giving you an older stylesheet.

   This version scopes layout under .page. Version 1 used .wrap. The two are
   not interchangeable: v1 CSS under v4 HTML renders full-width, because
   nothing matches the container.
   ========================================================================== */

/* ==========================================================================
   michaelperry.org — shared stylesheet

   Two surfaces, one system.

     DAY   (default)  reading pages: front page, articles, atlas, meditations
     NIGHT (.night)   field instruments: the three water dashboards,
                      IchthyoVis, the music archive

   Both draw from the same hues. The rule is use, not taste: if you read it on
   a riverbank before sunrise, it is night; if you sit down to read it, it is
   day.

   SCOPING. Only three things here are global: the :root tokens, .site-head /
   .site-foot, and the body surface classes. Everything else is scoped under
   .page, so this file can be dropped into any dashboard without colliding
   with that dashboard's own .wrap, .sub, section or h2 rules.
   ========================================================================== */

:root {
  /* --- day surface --- */
  --paper:  #e8edee;
  --panel:  #f2f6f6;
  --shell:  #dbe4e6;
  --deep:   #0f2630;
  --mid:    #375f6e;
  --rule:   #c2d0d4;
  --amber:  #b8620f;

  /* --- night surface: same hues, inverted lightness --- */
  --n-bg:    #0b1c23;
  --n-panel: #12262f;
  --n-card:  #16303a;
  --n-rule:  #23444f;
  --n-ink:   #d3dfe2;
  --n-mid:   #7fa0ab;
  --n-amber: #d8791f;

  /* --- data colours. These encode meaning, not mood. Do not restyle them
         for looks: a reading that is bad has to look bad. --- */
  --d-good:  #3fa96b;
  --d-fair:  #d9a520;
  --d-poor:  #cf5340;
  --d-teal:  #2f9e8a;
  --d-blue:  #4a90c4;

  --serif:  'Spectral', Georgia, 'Times New Roman', serif;
  --sans:   'Archivo', system-ui, -apple-system, sans-serif;
  --hebrew: 'Frank Ruhl Libre', 'Spectral', serif;

  --measure: 34rem;
  --page:    46rem;
}

/* ==========================================================================
   SURFACES
   ========================================================================== */

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

body {
  background: var(--paper);
  color: var(--deep);
  font-family: 'Spectral', Georgia, serif;
  font-family: var(--serif, 'Spectral', Georgia, serif);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body.night { background: var(--n-bg); color: var(--n-ink); }

/* ==========================================================================
   SITE CHROME — identical on every page, both surfaces
   ========================================================================== */

.site-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  padding: 1.4rem 0 1.1rem;
  border-bottom: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .875rem;
  box-sizing: border-box;
}
.site-head a { text-decoration: none; }
.site-head .wordmark { color: var(--deep); font-weight: 600; letter-spacing: -.01em; }
.site-head .wordmark:hover { color: var(--amber); }
.site-head nav { display: flex; flex-wrap: wrap; gap: .3rem 1.35rem; }
.site-head nav a { color: var(--mid); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.site-head nav a:hover { color: var(--deep); border-bottom-color: var(--amber); }
.site-head nav a[aria-current="page"] { color: var(--deep); border-bottom-color: var(--rule); }

.site-foot {
  border-top: 1px solid var(--rule);
  margin-top: 4rem;
  padding: 1.4rem 0 2.5rem;
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--mid);
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  justify-content: space-between;
  box-sizing: border-box;
}
.site-foot a { color: var(--mid); text-decoration: none; border-bottom: 1px solid var(--rule); }
.site-foot a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* Chrome on the night surface. Same shape, inverted ink. */
.night .site-head,
.night .site-foot { border-color: var(--n-rule); color: var(--n-mid); }
.night .site-head .wordmark { color: var(--n-ink); }
.night .site-head nav a,
.night .site-foot,
.night .site-foot a { color: var(--n-mid); }
.night .site-head .wordmark:hover,
.night .site-head nav a:hover,
.night .site-foot a:hover { color: var(--n-amber); border-bottom-color: var(--n-amber); }
.night .site-head nav a[aria-current="page"] { color: var(--n-ink); border-bottom-color: var(--n-rule); }
.night .site-foot a { border-bottom-color: var(--n-rule); }

/* Tools run full width, so their chrome gets its own gutter. */
.chrome-wide { max-width: 1280px; margin-left: auto; margin-right: auto;
               padding-left: 1.5rem; padding-right: 1.5rem; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.night :focus-visible { outline-color: var(--n-amber); }

/* ==========================================================================
   READING PAGES — everything below is scoped to .page
   ========================================================================== */

.page {
  max-width: 46rem;                /* literal fallback: layout must not */
  max-width: var(--page, 46rem);   /* depend on var() surviving minifiers */
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.page *, .page *::before, .page *::after { box-sizing: border-box; }
.page h1, .page h2, .page h3, .page p, .page ul, .page ol, .page figure { margin: 0; padding: 0; }
.page a { color: var(--deep); text-decoration: none; }
.page em { font-style: italic; }
.page strong { font-weight: 600; }

.hebrew { font-family: var(--hebrew); font-weight: 500; direction: rtl; unicode-bidi: isolate; }

/* --- gage hero --- */

.page .gage { display: block; width: 100%; height: 96px; margin-top: 2.5rem; }
.page .gage .trace {
  fill: none; stroke: var(--mid); stroke-width: 1.75; stroke-linejoin: round;
  stroke-dasharray: 1500; stroke-dashoffset: 1500;
  animation: draw 2.4s cubic-bezier(.22,.61,.36,1) forwards;
}
.page .gage .band { fill: var(--mid); opacity: 0; animation: wash 1.6s ease 1.1s forwards; }
.page .gage .datum { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 5; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes wash { to { opacity: .11; } }

@media (prefers-reduced-motion: reduce) {
  .page .gage .trace { animation: none; stroke-dashoffset: 0; }
  .page .gage .band  { animation: none; opacity: .11; }
}

.page .masthead { padding: .5rem 0 3.25rem; }
.page .masthead h1 {
  font-family: var(--sans); font-weight: 600; font-size: 1.5rem;
  letter-spacing: -.015em; margin-bottom: .9rem;
}
.page .masthead h1:last-child { margin-bottom: 0; }
.page .standfirst { font-size: 1.1875rem; line-height: 1.6; max-width: 34rem; max-width: var(--measure, 34rem); }
.page .standfirst:empty { display: none; }
.page .masthead nav {
  margin-top: 2rem; font-family: var(--sans); font-size: .875rem;
  display: flex; flex-wrap: wrap; gap: .4rem 1.5rem;
}
.page .masthead nav a { color: var(--mid); padding-bottom: 2px; border-bottom: 1px solid transparent; }
.page .masthead nav a:hover { color: var(--deep); border-bottom-color: var(--amber); }

/* --- sections and index rows --- */

.page section { padding-bottom: 3.25rem; }

.page h2 {
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding-bottom: .65rem; margin-bottom: .25rem;
  border-bottom: 2px solid var(--deep);
}

.page .intro { font-size: 1rem; color: var(--mid); margin: 1.1rem 0 1.6rem; max-width: 34rem; max-width: var(--measure, 34rem); }
.page .intro:empty { display: none; }
.page h2 + .index, .page h2 + .writing { margin-top: 1.6rem; }

.page .index { list-style: none; }
.page .index li { border-bottom: 1px solid var(--rule); }
.page .index a {
  display: grid; grid-template-columns: 13rem 1fr; gap: 0 1.75rem;
  padding: .95rem 0; align-items: baseline;
}
.page .index a:hover .name { color: var(--amber); }
.page .name { font-family: var(--sans); font-weight: 500; font-size: .9375rem; line-height: 1.5; }
.page .desc { font-size: .9375rem; line-height: 1.6; color: var(--mid); }
.page .live { display: inline-block; width: .4rem; height: .4rem; background: var(--amber); margin-right: .45rem; vertical-align: .12rem; }
.page .sub .name { padding-left: 1.25rem; font-weight: 400; color: var(--mid); }

.page .writing { list-style: none; }
.page .writing li { border-bottom: 1px solid var(--rule); padding: 1rem 0; }
.page .writing .title { display: block; font-size: 1.0625rem; line-height: 1.45; font-weight: 400; margin-bottom: .3rem; }
.page .writing a.title:hover { color: var(--amber); }
.page .cite { font-family: var(--sans); font-size: .8125rem; color: var(--mid); }
.page .also { font-family: var(--sans); font-size: .8125rem; margin-top: .5rem; }
.page .also a { color: var(--mid); border-bottom: 1px solid var(--rule); }
.page .also a:hover { color: var(--amber); border-bottom-color: var(--amber); }

/* --- articles --- */

.page .article-head { padding: 3rem 0 2.5rem; }
.page .article-head h1 {
  font-family: var(--serif); font-weight: 400; font-size: 1.875rem;
  line-height: 1.25; letter-spacing: -.01em; margin-bottom: 1rem; max-width: 30rem;
}
.page .article-head .byline { font-family: var(--sans); font-size: .8125rem; color: var(--mid); line-height: 1.8; }
.page .article-head .byline span { display: block; }

.page .note {
  background: var(--shell); border-left: 3px solid var(--mid);
  padding: 1rem 1.25rem; font-family: var(--sans); font-size: .8125rem;
  line-height: 1.65; color: var(--mid); margin-bottom: 2.5rem;
}
.page .note strong { color: var(--deep); font-weight: 600; }
.page .note a { color: var(--mid); border-bottom: 1px solid var(--rule); }
.page .note a:hover { color: var(--amber); border-bottom-color: var(--amber); }

.page .prose { max-width: 34rem; max-width: var(--measure, 34rem); }
.page .prose h2 {
  font-family: var(--sans); font-weight: 600; font-size: .9375rem;
  border-bottom: none; padding-bottom: 0; margin: 2.75rem 0 .9rem;
}
.page .prose h2:first-child { margin-top: 0; }
.page .prose h2 .num { color: var(--amber); font-weight: 500; margin-right: .5rem; }
.page .prose p { margin-bottom: 1.15rem; }
.page .prose ul, .page .prose ol { margin: 0 0 1.5rem 1.35rem; }
.page .prose li { margin-bottom: .55rem; }
.page .prose .lede {
  font-size: 1.0625rem; font-style: italic; color: var(--mid);
  border-left: 2px solid var(--amber); padding-left: 1rem; margin: -.2rem 0 1.4rem;
}

.page blockquote {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 1.35rem 0; margin: 1.9rem 0;
  font-size: 1.0625rem; line-height: 1.65; color: var(--mid);
}
.page blockquote p { margin-bottom: .7rem; }
.page blockquote p:last-child { margin-bottom: 0; }
.page blockquote cite {
  display: block; margin-top: .8rem; font-style: normal;
  font-family: var(--sans); font-size: .75rem; color: var(--mid);
}

.page .refs { max-width: 34rem; max-width: var(--measure, 34rem); }
.page .refs p {
  font-size: .875rem; line-height: 1.6; color: var(--mid);
  padding-left: 1.35rem; text-indent: -1.35rem; margin-bottom: .8rem;
}

/* --- psalm 127 addendum display blocks --- */

.page .psalm { background: var(--shell); border: 1px solid var(--rule); padding: 1.75rem 1.85rem; margin: 1.9rem 0; }
.page .psalm .verse { display: flex; gap: .9rem; margin-bottom: .85rem; }
.page .psalm .verse:last-child { margin-bottom: 0; }
.page .psalm .v { font-family: var(--sans); font-size: .6875rem; color: var(--amber); width: 1.4rem; flex-shrink: 0; padding-top: .45rem; }
.page .psalm .text { font-size: .9375rem; line-height: 1.65; }
.page .psalm .key { color: var(--amber); font-weight: 500; }

.page .calc { background: var(--panel); border: 1px solid var(--rule); padding: 1.6rem 1.5rem; margin: 1.6rem 0; }
.page .calc-grid { display: flex; flex-wrap: wrap; gap: 1.1rem 1.6rem; justify-content: center; }
.page .calc-letter { text-align: center; min-width: 2.6rem; }
.page .calc-letter .heb { font-family: var(--hebrew); font-size: 2.1rem; line-height: 1; color: var(--deep); }
.page .calc-letter .lbl { font-family: var(--sans); font-size: .6875rem; color: var(--mid); margin: .45rem 0 .1rem; }
.page .calc-letter .val { font-family: var(--sans); font-size: .8125rem; font-weight: 500; }
.page .calc-sum {
  margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--rule);
  text-align: center; font-family: var(--sans); font-size: .875rem; color: var(--mid);
}
.page .calc-sum strong { font-size: 1.5rem; font-weight: 600; color: var(--amber); margin-left: .35rem; }

.page ol.factors { list-style: none; margin: 1.5rem 0; counter-reset: factors; }
.page ol.factors li {
  border-top: 1px solid var(--rule); padding: .95rem 0 .95rem 2.6rem;
  position: relative; margin-bottom: 0; font-size: .9375rem; line-height: 1.6;
}
.page ol.factors li:last-child { border-bottom: 1px solid var(--rule); }
.page ol.factors li::before {
  content: counter(factors, upper-roman); counter-increment: factors;
  position: absolute; left: 0; top: 1.05rem;
  font-family: var(--sans); font-size: .75rem; font-weight: 500; color: var(--amber);
}
.page ol.factors strong { display: block; font-family: var(--sans); font-size: .8125rem; font-weight: 600; margin-bottom: .15rem; }

.page .coda { border-top: 2px solid var(--deep); margin-top: 3.25rem; padding-top: 2rem; max-width: 34rem; max-width: var(--measure, 34rem); }
.page .coda .heb-large { font-family: var(--hebrew); font-size: 3.25rem; line-height: 1; color: var(--deep); margin-bottom: 1.1rem; }
.page .coda p { font-size: 1.0625rem; line-height: 1.65; margin-bottom: 1.1rem; }
.page .coda .signoff { font-family: var(--hebrew); font-size: 1.5rem; color: var(--amber); }

.page p .hebrew { font-size: 1.15em; }

/* --- 404 --- */

.page .gone { padding: 4rem 0 3rem; }
.page .gone .code { font-family: var(--sans); font-weight: 600; font-size: 4rem; line-height: 1; color: var(--rule); letter-spacing: -.02em; margin-bottom: 1.25rem; }
.page .gone p { max-width: 34rem; max-width: var(--measure, 34rem); }

/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 34rem) {
  body { font-size: 1rem; }
  .page { padding: 0 1.15rem; }
  .chrome-wide { padding-left: 1.15rem; padding-right: 1.15rem; }
  .page .gage { height: 68px; margin-top: 1.75rem; }
  .page .masthead { padding-bottom: 2.5rem; }
  .page .standfirst { font-size: 1.0625rem; }
  .page .index a { grid-template-columns: 1fr; gap: .2rem; padding: .85rem 0; }
  .page .sub .name { padding-left: 0; }
  .page .sub .name::before { content: "\2014\00a0"; color: var(--rule); }
  .page .article-head { padding: 2rem 0; }
  .page .article-head h1 { font-size: 1.5rem; }
  .page .psalm { padding: 1.25rem 1.1rem; }
  .page .calc { padding: 1.2rem 1rem; }
  .page .calc-grid { gap: .9rem 1.1rem; }
  .page .calc-letter .heb { font-size: 1.75rem; }
  .page .coda .heb-large { font-size: 2.5rem; }
}