/* Ribosome Press: styles shared by every page. */
/* Layout: dark masthead bar across the top; below it, nav in a left column on wide screens
   (a row under the masthead on phones), and a single reading column for the content.
   Single deliberate light look (the site itself has no dark mode), so every color is set explicitly. */
/* Fonts served from this site (not Google), so visits aren't shared with Google.
   Copied 2026-10-27 from Google Fonts' CSS; both fonts are under the SIL Open Font License (see fonts/OFL-*.txt). */
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/CourierPrime-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/CourierPrime-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/CourierPrime-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Courier Prime'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/CourierPrime-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/LibreCaslonText-400i-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/LibreCaslonText-400i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/LibreCaslonText-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/LibreCaslonText-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/LibreCaslonText-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Libre Caslon Text'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/LibreCaslonText-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --bar: #231f20;          /* the cover's black */
  --bar-text: #ffffff;
  --bar-codon-1: #5f5c5c;  /* AUG (matches UACUAG) */
  --bar-codon-2: #5f5c5c;  /* UACUAG */
  --bar-tagline: #c9c5c0;
  --bg: #f6f4f0;           /* warm off-white page */
  --surface: #ffffff;
  --fg: #231f20;
  --muted: #6a6560;
  --rule: #dcd7cf;
  --accent: #2e6b4f;       /* deep green, a quieter cousin of the cover's band */
  --accent-text: #ffffff;
  --nav-hover: #ebe7e0;

  --serif: "Libre Caslon Text", Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --logo: Courier, "Courier New", monospace;   /* the logo's own face */
  /* Shared columns: masthead and page use the same grid, so the tagline and the body text start on one line.
     --side is the logo's width (11 Courier characters at 26px). */
  --side: 172px;
  --gutter: 32px;
  --text: 760px;    /* body text column */
  /* Overall page width = side padding + nav column + gutter + text column + side padding,
     so the masthead and footer end exactly where the body text ends. */
  --page: calc(24px + var(--side) + var(--gutter) + var(--text) + 24px);
  color-scheme: light;
}
/* ---------- base ---------- */
* { box-sizing: border-box; }
/* Read by screen readers, not shown */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--sans); font-size: 17px; line-height: 1.45;   /* running text in Helvetica Neue; Caslon only where set explicitly */
}
a { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- masthead ---------- */
.masthead { background: var(--bar); color: var(--bar-text); border-bottom: 1px solid var(--rule); }
.masthead-inner {
  max-width: var(--page); margin: 0 auto; padding: 22px 24px;
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: 10px var(--gutter);
  align-items: center;   /* one-line tagline centered on the two-line logo */
}
.logo {
  font-family: var(--logo); font-size: 26px; line-height: 1.05; letter-spacing: 0;
  text-decoration: none; color: var(--bar-text); white-space: pre; display: block;
}
.logo .c1 { color: var(--bar-codon-1); }
.logo .c2 { color: var(--bar-codon-2); }
.phone-break { display: none; }   /* tagline line break used only on phones */
.tagline {
  margin: 0; font-family: var(--serif); font-style: italic; font-size: 17px;
  color: var(--bar-tagline); line-height: 1.35;
}

/* ---------- page frame ---------- */
.frame {
  max-width: var(--page); margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: var(--side) minmax(0, 1fr); gap: var(--gutter);
}
nav.site-nav { padding-top: 44px; }
nav.site-nav ul {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px;
  position: sticky; top: 24px;
}
nav.site-nav a {
  display: block; font-family: var(--mono); font-size: 19px; letter-spacing: 0.04em;   /* was 18px; 19px chosen after trying 20px, user's request 2026-10-27 */
  text-decoration: none; color: var(--fg); padding: 8px 12px; border-radius: 6px;
  text-transform: uppercase;   /* all caps, like the logo */
}
nav.site-nav a:hover { background: var(--nav-hover); }
nav.site-nav a[aria-current="page"] { background: var(--fg); color: var(--bg); }

main { padding-block: 44px 72px; min-width: 0; max-width: var(--text); }

/* ---------- content ---------- */
.welcome { font-size: 22px; line-height: 1.4; margin: 0; text-wrap: pretty; }
.welcome b { font-weight: 700; }

.feature { margin-top: 44px; padding-top: 36px; border-top: 1px solid var(--rule); display: grid; gap: 24px; }
.kicker {
  font-family: var(--mono); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0;
}
.feature h2 {
  font-family: var(--sans); font-weight: 700; font-size: 30px; line-height: 1.15;
  letter-spacing: -0.01em; margin: 0;
}
.feature h2 span { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; letter-spacing: 0; margin-top: 6px; color: var(--muted); }
.book { display: grid; grid-template-columns: minmax(0, 286px) minmax(0, 1fr); gap: 30px; align-items: start; }
.book img {
  width: 100%; height: auto; display: block; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(35,31,32,0.18), 0 10px 28px rgba(35,31,32,0.16);
}
.book-side { display: grid; gap: 18px; align-content: start; align-self: center; }   /* centered on the cover's height */
.book-side p { margin: 0; }
.book-main { display: grid; gap: 18px; }   /* description + buttons */
.links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.links a {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family: var(--sans); font-size: 17px; font-weight: 500; text-decoration: none;
  padding: 12px 16px; border-radius: 8px; border: 1px solid var(--rule); color: var(--fg); background: var(--surface);
}
.links a:hover { border-color: var(--accent); }
.links a.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.links a .arrow { font-family: var(--mono); }
.specs { font-family: var(--mono); font-size: 14px; color: var(--muted); letter-spacing: 0.02em; text-align: right; }

footer.site-footer { border-top: 1px solid var(--rule); }
.footer-inner a { color: inherit; text-decoration: none; }
.footer-inner a:hover { color: var(--accent); text-decoration: underline; }
.footer-inner {
  max-width: var(--page); margin: 0 auto; padding: 22px 24px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font-family: var(--sans); font-size: 14px; color: var(--muted);
}

/* ---------- laptops and desktops (mouse or trackpad) ----------
   Fixed page width: a narrow window scrolls sideways instead of rearranging the layout. */
@media (pointer: fine) {
  body { min-width: var(--page); }
}

/* ---------- tablets in portrait (touch screens 720-899px wide) ----------
   The column beside the cover is too narrow for the book details to fit on one line each,
   so they move to their own row under the cover and links, left-aligned. */
@media (min-width: 720px) and (max-width: 899px) and (pointer: coarse) {
  .book {
    grid-template-areas: "cover main" "specs specs";
    /* Give the buttons enough room for one line each (widest label "Download free PDF (51 MB)"
       + arrow + padding ≈ 272px); the cover takes what's left, up to its usual 280px. */
    grid-template-columns: minmax(0, 280px) minmax(276px, 1fr);
    align-items: center;   /* description + buttons centered on the cover (or vice versa if taller) */
    row-gap: 24px;
    column-gap: 22px;   /* tighter than the usual 36px, so the cover can be larger */
  }
  .book img { grid-area: cover; }
  .book-side { display: contents; }
  .book-main { grid-area: main; }
  .specs { grid-area: specs; text-align: left; }
}

/* ---------- phones (touch screens under 720px wide) ---------- */
@media (max-width: 719px) and (pointer: coarse) {
  body { font-size: 17px; }
  .masthead-inner { padding: 19px 16px 15px; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
  .logo { font-size: 22px; }
  .tagline { font-size: 15px; align-self: stretch; text-align: right; }
  .phone-break { display: inline; }
  .frame { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 16px; }
  nav.site-nav { padding-top: 0; border-bottom: 1px solid var(--rule); margin: 0 -16px; padding-inline: 12px; }
  nav.site-nav ul { flex-direction: row; justify-content: space-between; position: static; padding-block: 8px; gap: 2px; }
  nav.site-nav a { font-size: 16px; padding: 7px 10px; }
  main { padding-block: 28px 48px; }
  .welcome { font-size: 19px; line-height: 1.3; }
  .feature { margin-top: 28px; padding-top: 26px; gap: 18px; }
  .feature h2 { font-size: 24px; margin-bottom: 8px; }   /* extra room before the cover */
  .feature h2 span { font-size: 19px; margin-top: 10px; }
  .book { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .book-side, .book-main { gap: 20px; }
  .book img { width: 70%; max-width: 290px; margin: 0 auto; }
  /* Footer: copyright and email stack; same line spacing as the book details lines */
  .footer-inner { padding-top: 18px; row-gap: 4px; flex-direction: column; align-items: flex-end; }   /* stacked, right-aligned */
}
/* Smallest phones (320px wide, e.g. original iPhone SE): tighten the nav buttons so all four fit in one row */
@media (max-width: 345px) and (pointer: coarse) {
  nav.site-nav a { padding-inline: 7px; }
}
@media (prefers-reduced-motion: no-preference) {
  .links a, nav.site-nav a { transition: background-color 0.15s, border-color 0.15s; }
}

/* ---------- inner pages (.page: book pages, Contact, ...) ---------- */
.page h1 {
  font-family: var(--sans); font-weight: 700; font-size: 34px; line-height: 1.12;
  letter-spacing: -0.01em; margin: 0;
}
.page h1 span { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: 0; margin-top: 8px; color: var(--muted); }
.byline { margin: 10px 0 0; font-family: var(--serif); font-size: 18px; }
.book-page .book { margin-top: 30px; }
.book-page .book img { align-self: center; }   /* cover centered on the description/buttons/details column */
.page section { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--rule); }
.page h2 {
  font-family: var(--mono); font-weight: 400; font-size: 16px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 18px;   /* was 15px; one step up, user's request 2026-10-27 */
}
.page h3 { font-family: var(--sans); font-size: 19px; font-weight: 700; margin: 26px 0 6px; }
.page h3:first-of-type { margin-top: 0; }
.page section p { margin: 0 0 14px; }   /* full column width, matching the top section (user's choice 2026-10-27) */
.page section p:last-child { margin-bottom: 0; }

/* Sample pages: thumbnails that open a full-size viewer */
.samples-group { margin: 22px 0 8px; font-family: var(--sans); font-size: 15px; font-weight: 700; color: var(--fg); }
.samples { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.samples a { display: block; text-decoration: none; color: var(--fg); }
.samples img {
  width: 100%; height: auto; display: block; background: #fff; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(35,31,32,0.18), 0 6px 16px rgba(35,31,32,0.12);
}
.samples a:hover img { box-shadow: 0 0 0 2px var(--accent), 0 6px 16px rgba(35,31,32,0.12); }
.samples span { display: block; margin-top: 8px; font-size: 14px; line-height: 1.3; }
.samples span small { display: block; font-family: var(--mono); font-size: 13px; color: var(--muted); }
.read-whole { margin-top: 22px !important; }

/* Viewer (a <dialog>) */
.viewer { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(35,31,32,0.94); color: #fff; }
.viewer::backdrop { background: rgba(35,31,32,0.94); }
.viewer-inner { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.viewer-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-family: var(--sans); font-size: 15px; }
.viewer-caption { flex: 1; min-width: 0; }
.viewer button {
  font: inherit; color: #fff; background: rgba(255,255,255,0.12); border: 0; border-radius: 6px;
  padding: 8px 12px; cursor: pointer;
}
.viewer button:hover { background: rgba(255,255,255,0.24); }
.viewer-stage { position: relative; overflow: auto; display: grid; place-items: start center; padding: 0 56px 16px; touch-action: pan-y pinch-zoom; }
.viewer-stage img { display: block; background: #fff; max-height: calc(100vh - 80px); width: auto; max-width: 100%; cursor: zoom-in; }
.viewer-stage.zoomed img { max-height: none; width: min(1600px, 100%); cursor: zoom-out; }
.viewer-prev, .viewer-next { position: fixed; top: 50%; transform: translateY(-50%); font-size: 22px !important; padding: 14px 12px !important; }
.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }

/* Contents */
/* Two lists side by side (chapters 1-3 left, 4-6 right), each read top to bottom (user's choice 2026-10-28) */
.contents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 36px; align-items: start; }
.contents > ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.contents > ol > li > b { display: block; font-size: 16px; margin-bottom: 4px; }
.contents li ol { list-style: none; margin: 0; padding: 0; font-size: 15px; line-height: 1.4; }
.contents li ol li { display: grid; grid-template-columns: 1.6em minmax(0, 1fr); }   /* letter column, so section titles (and their wrapped lines) align */
.contents .fe { color: var(--muted); }   /* Further Exploration sections */
.contents-back { margin-top: 26px !important; font-size: 15px; }

.series { margin: 0; padding-left: 1.3em; }
.series li { margin-bottom: 4px; }
.series .soon { color: var(--muted); }

@media (min-width: 720px) and (max-width: 899px) and (pointer: coarse) {
  .samples { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
}
@media (max-width: 719px) and (pointer: coarse) {
  .page h1 { font-size: 26px; }
  .page h1 span { font-size: 20px; }
  .page section { margin-top: 32px; padding-top: 26px; }
  .samples { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .contents { grid-template-columns: minmax(0, 1fr); }
  .viewer-stage { padding: 0 0 12px; }
  .viewer-prev, .viewer-next { top: auto; bottom: 14px; transform: none; }
}
.page .kicker + h1 { margin-top: 14px; }
.samples + .samples-group { margin-top: 30px; }

/* Contact page */
.page .lead { margin: 18px 0 0; font-size: 19px; line-height: 1.45; }
.page .visually-hidden + .lead { margin-top: 0; }   /* Contact: heading kept for screen readers, not shown (user's choice 2026-10-27) */
.page .email { font-family: var(--sans); font-size: 18px; font-weight: 500; }
.page .note { color: var(--muted); font-size: 15px; }

/* Books page: one row per volume (cover + text), rules between rows */
.books-page .lead { margin-top: 16px; }
.catalog { list-style: none; margin: 34px 0 0; padding: 0; }
.volume {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px 28px; align-content: center;
  padding: 30px 0; border-top: 1px solid var(--rule);
}
.volume-cover { display: block; grid-row: 1 / span 2; align-self: center; }   /* beside both the text and the buttons */
.volume-text { align-self: end; }
.volume-actions { grid-column: 2; display: grid; gap: 10px; align-self: start; }
.volume-actions p { margin: 0; }
.volume-cover img {
  width: 100%; height: auto; display: block; border-radius: 2px;
  box-shadow: 0 1px 2px rgba(35,31,32,0.18), 0 6px 16px rgba(35,31,32,0.14);
}
.volume-text { display: grid; gap: 10px; }
.volume-text p { margin: 0; }
.volume h2 {
  font-family: var(--sans); font-weight: 700; font-size: 22px; line-height: 1.2;
  letter-spacing: 0; text-transform: none; color: var(--fg); margin: 0;
}
.volume h2 a { color: inherit; text-decoration: none; }
.volume h2 a:hover { color: var(--accent); text-decoration: underline; }
.volume .links { max-width: 300px; }
.volume .specs { text-align: left; }
.volume.soon h2, .volume.soon .volume-text > p:not(.kicker) { color: var(--muted); }
.volume.soon { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }   /* no cover yet: text only, full width */
.volume.soon .volume-text { gap: 6px; }
@media (max-width: 719px) and (pointer: coarse) {
  .volume { grid-template-columns: 108px minmax(0, 1fr); gap: 18px; padding: 24px 0; }
  .volume.soon { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
  .volume-cover { grid-row: 1; align-self: center; }   /* centered on the text beside it */
  .volume-text { align-self: center; }
  .volume-actions { grid-column: 1 / -1; }   /* buttons full width under the cover, so labels stay on one line */
  .volume h2 { font-size: 19px; }
  .volume .links { max-width: none; }
  .volume .specs { text-align: right; }   /* matches the home page's details line on phones */
}

/* About page: plain text links with an arrow */
.page a.more { font-weight: 500; text-decoration: none; white-space: nowrap; }
.page a.more:hover { text-decoration: underline; }
.page a.more .arrow { font-family: var(--mono); }

/* Page not found (404.html) */
.notfound-links { margin: 26px 0 22px; line-height: 2; }