/* ------------------------------------------------------------------
   Number Theory and Physics Archive -- shared styling.

   Deliberately small. Pages keep their own fonts, colours and layout;
   this only supplies the persistent navigation bar, the section
   headings and a quieter horizontal rule. Anything that would change
   the archive's plain, text-first character belongs somewhere else.
   ------------------------------------------------------------------ */

/* --- persistent navigation ---------------------------------------- */

/* The rubber-band overscroll at the top of the document drags a sticky bar
   down with it. Refusing the overscroll on the scroll container itself is
   what stops that -- the bar then stays put whatever the page does. */
html { overscroll-behavior-y: none; }

/* The sticky bar is the first thing on every page, and the browser's default
   8px body margin sat above it. At rest that margin shows as a white band over
   the bar; once the page scrolls, the bar sticks to top:0 and the band
   disappears -- so the bar appeared to gain and lose a line of space depending
   on where the page had been scrolled, most visibly after a rubber-band
   overscroll left the document resting at an offset. Removing the top margin
   removes the band, and the bar then sits in exactly the same place whether it
   is stuck or not. The side and bottom margins are left alone: the pages'
   own layout assumes them. */
body { margin-top: 0; }

/* zeta/aarhus.htm carries a conference stylesheet recovered from the server
   this round, written before box-sizing existed: .mpsrule is width:100% with
   1em of padding on each side, which under content-box adds up to more than
   the page. The foreign stylesheet is left verbatim as the artefact it is;
   the correction lives here. */
.mpsrule, .footer { box-sizing: border-box; }

.ntpa-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  margin: 0 0 1.9em;
  padding: 0.6em 1.2em;
  background: #ffffff;
  border-bottom: 1px solid #d3d8de;
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-align: center;
  /* the pages this sits on are as old as the web: keep it out of the
     way of their table-based centring rather than fighting it */
  box-sizing: border-box;
  width: 100%;
}

.ntpa-nav a {
  color: #000099;
  text-decoration: none;
  padding: 0.15em 0;
  white-space: nowrap;
}

.ntpa-nav a:hover,
.ntpa-nav a:focus {
  text-decoration: underline;
}

/* the page you are already on */
.ntpa-nav a[aria-current="page"] {
  color: #333333;
  cursor: default;
  text-decoration: none;
}

.ntpa-nav .ntpa-sep {
  color: #b7bdc5;
  padding: 0 0.85em;
}

@media (max-width: 620px) {
  .ntpa-nav { font-size: 0.72rem; padding: 0.5em 0.6em; }
  .ntpa-nav .ntpa-sep { padding: 0 0.4em; }
}

@media print {
  .ntpa-nav { display: none; }
}

/* --- rules -------------------------------------------------------- */

/* Softer than the default 3-D groove, and fading at both ends so it
   reads as a pause rather than a border. */
hr {
  border: 0;
  height: 1px;
  margin: 2em 0;
  background: linear-gradient(to right,
    rgba(0, 0, 0, 0) 0%,
    #c2c7ce 12%,
    #c2c7ce 88%,
    rgba(0, 0, 0, 0) 100%);
}

/* A rule used purely as a title underline wants less air around it. */
h1 hr, h2 hr, h3 hr, h4 hr { margin: 0.7em 0; }

/* --- section headings --------------------------------------------- */

.ntpa-title {
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 1.55rem;
  font-weight: bold;
  line-height: 1.25;
  text-align: center;
  color: #1d2126;
  margin: 0.4em 0 0.9em;
}

/* A second line under the title, for pages whose heading is really a
   title plus a description of what the page is. Two lines make a heavier
   block than one and want more air under them; the extra is a margin rather
   than padding so that it still collapses against whatever follows, leaving
   the pages whose next element already sets its own generous margin (the
   provenance panels) exactly as they were. */
.ntpa-title:has(.sub) { margin-bottom: 1.5em; }

.ntpa-title .sub {
  display: block;
  margin-top: 0.35em;
  font-size: 0.72em;
  font-weight: normal;
  color: #5a616a;
}

/* Section headings. Lower case is the house style, but names stay as
   typed -- no text-transform here, or Riemann loses his capital. */
.ntpa-section {
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 1.15rem;
  font-weight: bold;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: #2b3138;
  text-align: left;
  margin: 2.4em 0 0.9em;
}

/* Quote attributions: left-aligned, quieter than the quote itself. */
.attrib {
  /* belongs to the quotation above it, so sit close to that and leave a
     clear gap before whatever comes next */
  margin: 0.15em 0 2em;
  font-size: 0.94em;
  color: #4a5058;
}

.attrib:before { content: "\2014\00a0"; }

/* the closing aside under the conclusion */
.attrib-plain { margin: 1.4em 0; text-align: right; }

/* --- citations and bibliography ------------------------------------ */

a.cite {
  text-decoration: none;
  white-space: nowrap;
  color: #4a5c93;
  font-size: 0.92em;
}

a.cite:hover, a.cite:focus { color: #000099; text-decoration: underline; }

.reflist {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1.15em;
  row-gap: 0.85em;
  margin: 1.2em 0 2em;
  font-size: 0.95em;
}

.reflist dt {
  color: #6a7280;
  font-size: 0.9em;
  padding-top: 0.15em;
  white-space: nowrap;
}

.reflist dd { margin: 0; }

/* Arriving from a citation, highlight the entry landed on. */
.reflist dt:target, .reflist dt:target + dd { background: #f3f0e4; }
.reflist dt:target { box-shadow: -0.4em 0 0 #f3f0e4; }

@media (max-width: 620px) {
  .ntpa-section { font-size: 1.05rem; }
  .reflist { grid-template-columns: 1fr; row-gap: 0.25em; }
  .reflist dt { padding-top: 0.9em; }
}

/* --- narrow screens ------------------------------------------------ */

/* These pages centre their text in a fixed-width table, which predates
   phones by a decade. Let that table shrink, and let the long bare URLs
   quoted throughout wrap instead of forcing the page sideways. Only
   applies below tablet width, so nothing changes on a desktop. */
@media (max-width: 780px) {
  /* "i" because some of these pages spell it align=CENTER, and CSS attribute
     values are case-sensitive by default. Every one of these outer wrappers
     was checked and has a single column, so fixed layout is safe here: it
     stops the widest unbreakable thing on the page -- a rendered equation, a
     scan, a long URL -- from setting the whole page's minimum width. */
  table[align="center" i] {
    width: 100% !important;
    max-width: 100%;
    table-layout: fixed;
  }
  /* "anywhere" rather than "break-word": only the former is taken into
     account when the table works out its minimum width, which is what
     was pushing the page sideways. */
  body { overflow-wrap: anywhere; }
  /* ...and neither is text the only thing that can set a table's minimum
     width. These pages carry plenty of 500-odd-pixel scans and plots from
     an era when that was a generous size. */
  /* A rendered equation is unbreakable, so a wide one sets the whole table's
     minimum width and takes the page sideways with it. Let the equation
     scroll inside its own box instead of the page scrolling. */
  /* inline-block is the point: MathJax leaves inline containers as
     display:inline, and overflow and max-width do nothing on an inline box */
  mjx-container {
    display: inline-block;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    vertical-align: middle;
  }
  /* Preformatted text has the same problem for the same reason. */
  pre { white-space: pre-wrap; overflow-x: auto; }
  /* Not every layout table on these pages carries align="center". */
  table { max-width: 100%; }
  /* Some carry a pixel width instead. There are exactly ten of those in the
     whole archive and they are all 1990s layout tables, so the same fixed
     layout is safe -- and this is scoped to narrow screens, so desktop
     rendering is untouched either way. */
  table[width]:not([width$="%"]) {
    width: 100% !important;
    table-layout: fixed;
  }
  /* ...and the cells too. Under fixed layout the column widths come from the
     first row, so a table told to be 100% wide is still forced back out to the
     sum of its cells' pixel widths unless those are released as well. */
  td[width], th[width] { width: auto; }
  /* <hr width="407"> and the like: a rule wider than the phone it is on. */
  hr { max-width: 100%; }
  /* hspace adds its margin on each side of an image already capped at 100%,
     which is enough on its own to push the page sideways. */
  img[hspace] { margin-left: 0; margin-right: 0; }
  /* <font size="7"> is 48px, and a word like "telecommunications" is then
     wider than the phone all by itself. Only two pages use these sizes. */
  font[size="7"] { font-size: 1.9rem; }
  font[size="6"] { font-size: 1.6rem; }
}

/* --- anchors ------------------------------------------------------- */

/* Deep links land under the sticky bar unless targets reserve room. */
[id], a[name] { scroll-margin-top: 4rem; }

/* --- quotations set apart -------------------------------------------- */

.ntpa-quote {
  margin: 1.2em 0 1.2em 1.6em;
  padding-left: 1em;
  border-left: 2px solid #ccd2da;
  font-size: 1.02em;
  line-height: 1.55;
}

/* A caption under a figure. Small type is right here -- unlike a quotation,
   which several of these pages had also shrunk to <font size=-1> and which
   should read at full size. */
.ntpa-caption {
  display: block;
  margin: 0.4em auto 1.8em;
  max-width: 34rem;
  font-size: 0.85em;
  line-height: 1.5;
  color: #5a616a;
  text-align: center;
}

/* --- the modern archive entrance --------------------------------------
   Used only by zeta/physics.htm. Everything here is layout: no fonts, no
   colours beyond the greys and the one blue already in use elsewhere in
   this file. The classic index is preserved verbatim alongside it. */

.ntpa-standfirst {
  max-width: 40rem;
  margin: 0 auto 2.2em;
  text-align: left;
  font-size: 1.02em;
  line-height: 1.55;
}

.ntpa-standfirst p { margin: 0 0 0.9em; }

/* the search field, sitting where a visitor looks first */
.ntpa-entrance-search { max-width: 34rem; margin: 3.2em auto 2.6em; }
.ntpa-entrance-search form { margin: 0; }
.ntpa-searchrow { display: flex; gap: 0.5em; flex-wrap: wrap; }
.ntpa-searchrow input[type=text] {
  flex: 1 1 18em; min-width: 0; padding: 0.55em 0.7em;
  font: inherit; font-size: 1rem;
  border: 1px solid #b7bdc5; border-radius: 3px; background: #fff; color: #000;
}
.ntpa-searchrow input[type=text]:focus { outline: 2px solid #4a5c93; outline-offset: -1px; }
.ntpa-searchrow button {
  padding: 0.55em 1.1em; font: inherit; font-size: 0.95rem;
  border: 1px solid #b7bdc5; border-radius: 3px;
  background: #f4f5f7; color: #1d2126; cursor: pointer;
}
.ntpa-searchrow button:hover, .ntpa-searchrow button:focus { background: #e9ebef; }
.ntpa-searchscope {
  margin: 0.7em 0 0; font-size: 0.82rem; color: #4a5058;
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
}

/* "ways in" -- a handful of routes, not a wall of cards */
.ntpa-ways { max-width: 44rem; margin: 0 auto 2.8em; text-align: left; }
.ntpa-way {
  display: block; padding: 0.75em 0;
  border-top: 1px solid #e2e5ea; text-decoration: none; color: inherit;
}
.ntpa-ways .ntpa-way:last-of-type { border-bottom: 1px solid #e2e5ea; }
.ntpa-way b {
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 0.98rem; color: #000099;
}
.ntpa-way:hover b, .ntpa-way:focus b { text-decoration: underline; }
.ntpa-way span {
  display: block; margin-top: 0.15em;
  font-size: 0.88rem; color: #4a5058; line-height: 1.45;
}

/* the subject lists, keeping the archive's own order */
.ntpa-subjects { max-width: 46rem; margin: 0 auto; text-align: left; }
.ntpa-subject-head {
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 1.05rem; font-weight: bold; color: #2b3138;
  margin: 2.2em 0 0.3em;
}
.ntpa-subject-note {
  margin: 0 0 0.9em; font-size: 0.88rem; color: #5a616a; line-height: 1.45;
}
.ntpa-subject-list { margin: 0 0 0.6em; line-height: 1.9; }
/* No middot between these: a visible separator always ends up dangling at
   the end of a wrapped line or leading the next one. Space the items. */
.ntpa-subject-list a {
  display: inline-block;
  margin: 0 1.5em 0.15em 0;
  white-space: nowrap;
}

.ntpa-colophon {
  max-width: 46rem; margin: 3.2em auto 0; padding-top: 1.2em;
  border-top: 1px solid #e2e5ea;
  text-align: left; font-size: 0.85rem; color: #5a616a; line-height: 1.5;
}

@media (max-width: 620px) {
  /* nowrap keeps two-word subject names together on a wide screen; on a
     narrow one it is what would force the page sideways */
  .ntpa-subject-list a { white-space: normal; margin-right: 1.1em; }
  .ntpa-subject-list { line-height: 1.85; }
}

/* --- the two layers, told apart by type -------------------------------
   Matthew's steer: the research archive should read as the more modern,
   outward-facing thing; the isoc/ layer beneath it as the older, more
   classical one. So sans for zeta/, serif for isoc/, and no texture under
   either -- the vellum and parchment backgrounds are gone from isoc/, which
   is now plain white.

   These rules deliberately override the pages' own <font face="..."> tags.
   A presentational attribute carries zero specificity, so any selector at
   all beats it -- which is what lets 250 hand-written pages be unified
   without touching the markup in each of them. `font[face="symbol"]` is
   excluded because a couple of pages still use that trick for Greek
   letters, and overriding it would turn them into Latin. */

body.ntpa-zeta,
body.ntpa-zeta font:not([face="symbol" i]) {
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
}

body.ntpa-isoc,
body.ntpa-isoc font:not([face="symbol" i]) {
  font-family: Georgia, "Palatino Linotype", Palatino, "Book Antiqua",
               Garamond, "Times New Roman", serif;
}

body.ntpa-isoc {
  background-image: none;
  background-color: #ffffff;
}

/* monospace stays monospace whichever layer it is in */
body.ntpa-zeta pre, body.ntpa-zeta tt, body.ntpa-zeta code, body.ntpa-zeta kbd,
body.ntpa-isoc pre, body.ntpa-isoc tt, body.ntpa-isoc code, body.ntpa-isoc kbd {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* and the navigation bar reads the same on both, so it does not flicker
   between typefaces as a visitor crosses from one layer to the other */
body.ntpa-isoc .ntpa-nav,
body.ntpa-isoc .ntpa-nav font,
body.ntpa-isoc .archive-meta,
body.ntpa-isoc .archive-meta font {
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
}

/* The Manzoni animation, which several pages open with. It was carrying an
   inline style, which no media query can override. */
img.ntpa-anim {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* A scan or plot sitting in the flow of an argument: centred, given room,
   and never wider than it is worth. */
img.ntpa-fig {
  display: block;
  margin: 1.6em auto 1.8em;
  max-width: 100%;
  height: auto;
}

/* --- the psi(x) - x zoom, on isoc/psizoom.htm ------------------------- */

.psi-zoom { margin: 1.8em auto 2.2em; max-width: 900px; }
.psi-zoom canvas {
  width: 100%; height: auto; display: block;
  border: 1px solid #ddd8cc; background: #fff;
}
.psi-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px;
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif; font-size: .82rem;
}
.psi-controls button {
  font: inherit; padding: .45em .9em; cursor: pointer;
  border: 1px solid #c9c2b4; border-radius: 3px; background: #f4f2ec; color: #2b3138;
}
.psi-controls button:hover, .psi-controls button:focus { background: #ece8de; }
.psi-controls input[type=range] { flex: 1 1 200px; min-width: 140px; }
.psi-controls label { color: #7a7266; }
.psi-readout { color: #5a616a; font-variant-numeric: tabular-nums; }
.psi-note {
  margin: .8em 0 0; font-size: .9em; line-height: 1.5; color: #5a616a;
}

/* --- the companion view on isoc/psizoom.htm --------------------------- */

.psi-log { margin: 3em auto 1.5em; max-width: 900px; }
.psi-log-head {
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 1.1rem; font-weight: bold; color: #2b3138; margin: 0 0 .7em;
}
.psi-log-intro, .psi-log-note { margin: 0 0 1em; line-height: 1.6; }
.psi-log-note { margin: 1em 0 0; font-size: .95em; color: #4a5058; }
.psi-log canvas {
  width: 100%; height: auto; display: block;
  border: 1px solid #ddd8cc; background: #fff;
}

/* Three labels standing at the corners of a triangle. These were small GIFs of
   set text; as real text they stay legible at any size and can be searched. */
.ntpa-triangle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.6em 1.2em;
  max-width: 40rem;
  margin: 2.2em auto 2.4em;
  text-align: center;
  line-height: 1.4;
}
.ntpa-triangle .apex { grid-column: 1 / -1; }
/* the base labels belong at the OUTER corners: aligning them inward makes
   the triangle collapse into a single run-on line */
.ntpa-triangle .left { text-align: left; }
.ntpa-triangle .right { text-align: right; }

/* The way back up out of the archaeological layer. One link, at the foot of
   each isoc/ page, in the layer's own voice rather than a row of navigation. */
.isoc-back {
  margin: 3.4em 0 1.8em;
  text-align: center;
  font-weight: bold;
  font-style: italic;
}

/* --- provenance panels -------------------------------------------------
   Used on the isoc/ pages, which are older and more speculative than the
   rest of the archive and are presented as what they are rather than
   quietly modernised. A calm archival panel, deliberately NOT a warning:
   no colour, no icon, no interstitial. Dates and page type only, plus one
   sentence. If a date is not known it is left out rather than guessed. */

/* The "elsewhere" footnote under the isoc routes: a quiet aside, not a
   navigation block. */
.isoc-elsewhere {
  max-width: 44rem;
  margin: 0 auto;
  text-align: left;
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 0.82rem;
  color: #5a616a;
  line-height: 1.6;
}

.archive-meta {
  max-width: 40rem;
  /* symmetric: the panel is an aside and should sit in its own clear space,
     not tucked under whatever precedes it */
  margin: 3.4em auto;
  padding: 0.9em 1.1em 1em;
  background: #f4f2ec;
  border: 1px solid #e0dcd1;
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 0.82rem;
  line-height: 1.5;
  color: #4a5058;
  text-align: left;
}

.archive-meta .type {
  font-weight: bold;
  color: #2b3138;
  letter-spacing: 0.01em;
}

.archive-meta dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 1em;
  row-gap: 0.1em;
  margin: 0.55em 0 0.7em;
}

.archive-meta dt { color: #6a7280; }
.archive-meta dd { margin: 0; }
.archive-meta p { margin: 0; }
.archive-meta a { color: #4a5c93; }

@media (max-width: 620px) {
  .archive-meta dl { grid-template-columns: 1fr; row-gap: 0; }
  .archive-meta dt { margin-top: 0.4em; }
}

/* --- the threshold into the isoc/ layer -------------------------------- */

.isoc-routes { max-width: 44rem; margin: 0 auto 2.4em; text-align: left; }

.isoc-route {
  display: block;
  padding: 0.8em 0;
  border-top: 1px solid #ddd8cc;
  text-decoration: none;
  color: inherit;
}

.isoc-routes .isoc-route:first-of-type { border-top: none; }
.isoc-routes .isoc-route:last-of-type { border-bottom: 1px solid #ddd8cc; }

.isoc-route b {
  font-size: 1.02rem;
  /* these pages set their own link red; a restrained version of it keeps
     the titles visibly clickable without shouting */
  color: #9b3434;
}

.isoc-route .kind {
  display: block;
  margin-top: 0.1em;
  font-family: Arial, Verdana, Helvetica, Geneva, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: #7a7266;
}

.isoc-route span.blurb {
  display: block;
  margin-top: 0.3em;
  font-size: 0.92em;
  line-height: 1.5;
  color: #4a5058;
}

.isoc-route:hover b, .isoc-route:focus b { text-decoration: underline; }

/* --- a portrait the prose flows around -------------------------------- */

.ntpa-portrait {
  float: right;
  margin: 0.3em 0 1.1em 1.8em;
  max-width: 45%;
  border: 1px solid #d9dde3;
}

@media (max-width: 620px) {
  /* below this, a floated image leaves the text in a gutter a few words
     wide -- better to let it stand on its own */
  .ntpa-portrait {
    float: none;
    display: block;
    max-width: 70%;
    margin: 1.2em auto;
  }
}

/* --- figures ---------------------------------------------------------- */

.ntpa-figure {
  /* the one deliberately centred element on these pages, and sized down
     from the scan's own 688px so it sits in the text rather than shouting */
  max-width: 516px;
  margin: 1.6em auto 1.8em;
  text-align: center;
}

.ntpa-figure img {
  max-width: 100%;
  height: auto;
  border: 1px solid #d9dde3;
}

.ntpa-figure figcaption {
  margin-top: 0.5em;
  text-align: center;
  font-size: 0.85em;
  color: #5a616a;
}


/* --- narrow screens, continued ----------------------------------------------
   This has to sit at the END of the file, and that is the whole point of it
   being here rather than in the main narrow-screen block above. That block
   comes before img.ntpa-fig and img.ntpa-anim are defined, and a class
   selector inside a media query does not beat an identical class selector
   further down the sheet: equal specificity, later wins. Three attempts at
   this fix failed for that reason alone while the rule itself was correct.

   As for the rule: a percentage max-width is circular inside an auto-layout
   table -- the image's limit depends on the table's width, which depends on
   the image -- so the browser resolves the table's minimum from the image's
   INTRINSIC width instead, and one 400px graph on isoc/evolutionnotes.htm
   dragged the whole page 18px wider than the phone reading it. min(100%, ...)
   does not help: the percentage survives into the used value and stays
   circular. A viewport length alone is definite, so the minimum has something
   real to be. The 40px covers the body margins, the wrapper table's padding
   and a classic scrollbar, since 100vw counts the scrollbar and clientWidth
   does not -- and 40px proved not to be enough, because some of these pages
   nest their content two or three tables deep and each level adds a little.
   56px clears the deepest of them, measured across all 256 pages. */

@media (max-width: 780px) {
  img, img.ntpa-fig, img.ntpa-anim { max-width: calc(100vw - 56px); height: auto; }
  /* Same circularity, same fix: a wide equation's container was setting the
     minimum width of the whole page. On isoc/evolutionnotes.htm the thing
     actually doing it was a single integral sign. */
  mjx-container { max-width: calc(100vw - 56px); }
}