/* ==========================================================
   rontrueblood.blog — minimal edition
   ----------------------------------------------------------
   Ron's brief, August 2026: black text on a white page, far
   less of everything, and easy for an older reader to use.

   The Marine palette is kept, but demoted to accents: scarlet
   for links and rules, navy for the masthead, gold hairlines.
   Nothing sits on a dark field except the footer.

   Base type is 20px. That is deliberate and it is not a bug —
   readers of this site are mostly over sixty. The A A A control
   in the header takes it to 22 or 25 and remembers the choice.
   ========================================================== */

:root {
  --paper:      #FFFFFF;
  --paper-2:    #FAF9F7;   /* cards, never more than a shade off white */
  --ink:        #111111;
  --ink-soft:   #4A4A4A;
  --rule:       #E3E1DC;
  --scarlet:    #8B1A1A;
  --scarlet-2:  #6E1414;
  --navy:       #0A1128;
  --gold:       #B8942F;   /* hairlines and rules only — 2.87:1, decorative */
  --gold-ink:   #8A6E1C;   /* the same gold, dark enough to read: 4.85:1 on white */
  --gold-lite:  #E8C765;   /* for the navy footer */

  --font-head: "Oswald", "Arial Narrow", Arial, sans-serif;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --base: 20px;
  --measure: 36em;          /* ~68 characters — the comfortable line */
  --tap: 48px;              /* minimum touch target */
}

html[data-size="large"]  { --base: 22px; }
html[data-size="larger"] { --base: 25px; }

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  font-size: var(--base);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--scarlet); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--scarlet-2); }

:focus-visible {
  outline: 3px solid var(--gold-ink);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: 0.02em;
  color: var(--ink);
}

h1 { font-size: 2.1rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p + p { margin-top: 1.1em; }

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 1.2rem; }
.narrow { max-width: var(--measure); margin-left: auto; margin-right: auto; }

.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--navy); color: #fff; padding: 0.8rem 1.2rem; z-index: 200;
}
.skip:focus { left: 0.6rem; top: 0.6rem; }

/* ---------------------------------------------------- header */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}

.masthead-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.9rem;
  padding-bottom: 0.9rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--navy);
  margin-right: auto;
}
.brand svg { width: 2.3rem; height: 2.3rem; color: var(--navy); flex: none; }
.brand b {
  font-family: var(--font-head);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  line-height: 1.1;
}
.brand small {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}

/* the search box, on every page */
.search-form { display: flex; gap: 0.4rem; }
.search-form input[type="search"] {
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0 0.8rem;
  height: var(--tap);
  min-width: 13rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
}
.search-form input[type="search"]:focus { border-color: var(--navy); }
.search-form button {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  height: var(--tap);
  padding: 0 1.1rem;
  border: 0;
  border-radius: 2px;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
.search-form button:hover { background: var(--scarlet); }

/* A A A */
.textsize { display: flex; align-items: center; gap: 0.3rem; }
.textsize span {
  font-family: var(--font-head);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.textsize button {
  font-family: var(--font-head);
  min-width: var(--tap);
  height: var(--tap);
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
  border-radius: 2px;
  line-height: 1;
}
.textsize button[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.textsize button:nth-child(2) { font-size: 0.8rem; }
.textsize button:nth-child(3) { font-size: 1rem; }
.textsize button:nth-child(4) { font-size: 1.2rem; }

/* ---------------------------------------------------- nav */

.mainnav { border-top: 1px solid var(--rule); }
.mainnav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.6rem;
}
.mainnav a {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 3px solid transparent;
}
.mainnav a:hover { color: var(--scarlet); border-bottom-color: var(--scarlet); }
.mainnav a[aria-current="page"] { border-bottom-color: var(--navy); }

/* a book section carries no site nav — Ron asked that each book
   be its own place, with only a way back to the front page */
.backbar {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.backbar .wrap { display: flex; align-items: center; gap: 1rem; min-height: var(--tap); }
.backbar a {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
}
.backbar a:hover { color: var(--scarlet); }
.backbar .here {
  font-family: var(--font-head);
  font-size: 0.82rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-left: auto;
}

/* ---------------------------------------------------- page furniture */

main { padding: 3rem 0 4rem; }

.page-head { max-width: var(--measure); margin: 0 0 2.5rem; }
.eyebrow {
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin-bottom: 0.6rem;
}
.page-head p.lede { font-size: 1.05rem; color: var(--ink-soft); margin-top: 0.9rem; }

hr.rule { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }
hr.thin { border: 0; border-top: 1px solid var(--rule); margin: 1.6rem 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap);
  padding: 0 1.5rem;
  font-family: var(--font-head);
  font-size: 0.85rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--scarlet); border-color: var(--scarlet); color: #fff; }
.btn-quiet { background: var(--paper); color: var(--ink); }
.btn-quiet:hover { background: var(--paper-2); color: var(--scarlet); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.8rem; }

/* ---------------------------------------------------- the doors */

.doors {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.doors li {
  background: var(--paper);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.doors a {
  display: block;
  padding: 1.6rem 1.4rem;
  text-decoration: none;
  color: var(--ink);
  height: 100%;
  transition: background 0.15s ease;
}
.doors a:hover { background: var(--paper-2); }
.doors b {
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.45rem;
}
.doors a:hover b { color: var(--scarlet); }
.doors span { display: block; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }
.doors em {
  font-family: var(--font-head);
  font-style: normal;
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
  margin-top: 0.7rem;
}

/* ---------------------------------------------------- lists of pieces */

.pieces { list-style: none; border-top: 1px solid var(--rule); }
.pieces li { border-bottom: 1px solid var(--rule); }
.pieces a {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0.3rem;
  text-decoration: none;
  color: var(--ink);
  min-height: var(--tap);
}
.pieces a:hover { background: var(--paper-2); color: var(--scarlet); }
.pieces .n {
  font-family: var(--font-head);
  font-size: 0.85rem;
  color: var(--ink-soft);
  min-width: 2.4rem;
  flex: none;
}
.pieces .t { font-size: 1.02rem; flex: 1; }
.pieces li.pending {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding: 1rem 0.3rem;
  min-height: var(--tap);
  color: var(--ink-soft);
}
.pieces li.pending .t { font-style: italic; }

.pieces .m {
  font-family: var(--font-head);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: none;
}

/* ---------------------------------------------------- reading */

.reading { max-width: var(--measure); margin: 0 auto; }
.reading h1 { margin-bottom: 0.8rem; }
.reading .byline {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.reading p { font-size: 1rem; }
.reading figure { margin: 2.2rem 0; }
.reading figure img { width: 100%; border: 1px solid var(--rule); }
.reading figcaption {
  font-family: var(--font-head);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 0.7rem;
}
.reading blockquote {
  border-left: 3px solid var(--scarlet);
  padding-left: 1.2rem;
  margin: 1.6rem 0;
  font-style: italic;
  color: var(--ink-soft);
}

.aside-block {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--gold);
  padding: 1.4rem 1.5rem;
  margin: 2.5rem 0;
  background: var(--paper-2);
}
.aside-block h2, .aside-block h3 {
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--scarlet);
  margin-bottom: 0.8rem;
}
.aside-block ul { list-style: none; }
.aside-block li { padding-left: 1.1rem; position: relative; margin-bottom: 0.6rem; font-size: 0.95rem; }
.aside-block li::before { content: "—"; position: absolute; left: 0; color: var(--gold-ink); }

.pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  border-top: 1px solid var(--rule);
  margin-top: 3rem;
  padding-top: 1.4rem;
}
.pager a {
  font-family: var(--font-head);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  display: flex;
  align-items: center;
  min-height: var(--tap);
}
.pager a:hover { color: var(--scarlet); }

/* ---------------------------------------------------- picture grids */

.plates {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 2rem 1.6rem;
}
.plates figure { margin: 0; }
.plates img {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--paper-2);
}
.plates figcaption { margin-top: 0.7rem; }
.plates b {
  font-family: var(--font-head);
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.3rem;
}
.plates span { font-size: 0.85rem; color: var(--ink-soft); line-height: 1.5; }

/* cartoons get a little life on hover — Ron asked that they be
   the most prominent thing on the site */
.plates a { display: block; text-decoration: none; color: inherit; }
.plates figcaption em {
  font-family: var(--font-head);
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  display: block;
  margin-top: 0.45rem;
}
.plates a:hover figcaption em,
.plates a:focus-visible figcaption em { color: var(--scarlet); }
.plates img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.plates a:hover img,
.plates a:focus-visible img {
  transform: translateY(-4px) scale(1.012);
  box-shadow: 0 10px 26px rgba(10, 17, 40, 0.16);
}

/* ---------------------------------------------------- video */

.tube { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 2.4rem 1.8rem; }
.frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy);
  border: 1px solid var(--rule);
  overflow: hidden;
}
.frame iframe, .frame button { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.frame button { cursor: pointer; background: none; padding: 0; }
.frame button img { width: 100%; height: 100%; object-fit: cover; }
.frame .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 4.6rem; height: 3.2rem; border-radius: 0.7rem;
  background: rgba(139, 26, 26, 0.92);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.2s ease;
}
.frame button:hover .play { transform: translate(-50%, -50%) scale(1.09); }
.frame .play::after { content: ""; border-left: 1.15rem solid #fff; border-top: 0.7rem solid transparent; border-bottom: 0.7rem solid transparent; margin-left: 0.25rem; }
.tube h3 { margin: 0.9rem 0 0.35rem; }
.tube p { font-size: 0.9rem; color: var(--ink-soft); }

.tiktok-wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.6rem; }

/* ---------------------------------------------------- the book on the front page */

.bookstage {
  padding: 0.5rem 0;
  perspective: 2200px;
  display: flex;
  justify-content: center;
}

.book {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 54rem;
  transform-style: preserve-3d;
}
/* The book used to be a fixed 16/10 box with the leaves clipped to fit. That
   silently cut the text off between 736 and about 1100 pixels, and it cut off
   every spread once the A A A control was turned up — which is exactly the
   reader the control exists for. The spread now sits in normal flow and the
   book is as tall as whatever is on the page. The floor is in em, so it grows
   with the text size instead of fighting it. */

.book-spread {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 22em;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 18px 46px rgba(10, 17, 40, 0.13);
}
/* the gutter — a soft crease down the middle, no texture, no gimmick */
.book-spread::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 3rem; transform: translateX(-50%);
  background: linear-gradient(to right,
    rgba(10,17,40,0) 0%, rgba(10,17,40,0.055) 42%,
    rgba(10,17,40,0.10) 50%, rgba(10,17,40,0.055) 58%, rgba(10,17,40,0) 100%);
  pointer-events: none;
}

.leaf {
  padding: 2.2rem 2.2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.leaf-l { border-right: 0; }

.leaf .eyebrow { margin-bottom: 0.5rem; }
.leaf h2 { font-size: 1.75rem; margin-bottom: 0.8rem; }
.leaf p { font-size: 0.95rem; color: var(--ink-soft); }
.leaf .btn { margin-top: 1.4rem; align-self: flex-start; }
.leaf img { max-height: 15rem; width: auto; margin: 0 auto; border: 1px solid var(--rule); }

/* the cover leaf */
.leaf-cover { align-items: center; text-align: center; background: var(--paper-2); }
.leaf-cover svg { width: 4.6rem; height: 4.6rem; color: var(--navy); margin: 0 auto 1.2rem; }
.leaf-cover h2 { font-size: 2rem; }
.leaf-cover .stamp {
  font-family: var(--font-head);
  font-size: 0.64rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-top: 1.4rem;
}

/* the turning page */
.turner {
  position: absolute;
  top: 0; bottom: 0; left: 50%; width: 50%;
  transform-origin: left center;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: 0;
}
.book[data-turning="fwd"] .turner {
  opacity: 1;
  animation: leaf-fwd 0.62s cubic-bezier(0.4, 0.02, 0.3, 1) both;
}
.book[data-turning="back"] .turner {
  opacity: 1;
  left: 0;
  transform-origin: right center;
  animation: leaf-back 0.62s cubic-bezier(0.4, 0.02, 0.3, 1) both;
}
.turner .face {
  position: absolute;
  inset: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: -8px 0 22px rgba(10, 17, 40, 0.10);
}
.turner .face.back { transform: rotateY(180deg); box-shadow: 8px 0 22px rgba(10, 17, 40, 0.10); }

@keyframes leaf-fwd  { from { transform: rotateY(0deg); }    to { transform: rotateY(-178deg); } }
@keyframes leaf-back { from { transform: rotateY(0deg); }    to { transform: rotateY(178deg); } }

.book-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}
.book-controls .btn { min-width: 9.5rem; }
.book-where {
  font-family: var(--font-head);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  min-width: 8rem;
  text-align: center;
}
.book-dots { display: flex; gap: 0.45rem; justify-content: center; margin-top: 1rem; flex-wrap: wrap; }
.book-dots button {
  width: 2.2rem; height: 2.2rem;
  border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
.book-dots button::after {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%;
  background: var(--rule); transition: background 0.2s ease, transform 0.2s ease;
}
.book-dots button[aria-current="true"]::after { background: var(--scarlet); transform: scale(1.5); }

/* no JavaScript, or the reader would rather not: the pages simply stack */
.book-plain { display: none; }
.no-js .bookstage, .no-js .book-controls, .no-js .book-dots { display: none; }
.no-js .book-plain { display: block; }

/* px, not rem: a rem inside a media query is always 16px, never the 20px base
   this site sets, so `46rem` here meant 736px and not what it looked like. */
@media (max-width: 768px) {
  .bookstage { perspective: none; padding: 0; }
  .book-spread { grid-template-columns: 1fr; min-height: 0; }
  .book-spread::after { display: none; }
  .leaf-l { display: none; }          /* one page at a time on a phone */
  .leaf { padding: 1.5rem 1.2rem; justify-content: flex-start; }
  .leaf img { max-height: 13rem; }
  .turner { display: none; }
  .book-controls .btn { flex: 1 1 10rem; }
  .search-form { width: 100%; }
  .search-form input[type="search"] { flex: 1; min-width: 0; }
  h1 { font-size: 1.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
  .plates a:hover img { transform: none; }
}

/* ---------------------------------------------------- search */

.hit { border-bottom: 1px solid var(--rule); padding: 1.3rem 0; }
.hit h2 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.hit h2 a { text-decoration: none; }
.hit .where {
  font-family: var(--font-head);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.4rem;
}
.hit p { font-size: 0.92rem; color: var(--ink-soft); }
.hit mark { background: #FBEFC4; color: var(--ink); padding: 0 0.1em; }
.search-big { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 2.4rem; }
.search-big input[type="search"] {
  flex: 1 1 20rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  height: 3.4rem;
  padding: 0 1rem;
  border: 1px solid var(--rule);
  border-radius: 2px;
}
.search-big button { height: 3.4rem; }

/* ---------------------------------------------------- notes & footer */

.note {
  border-left: 3px solid var(--gold);
  padding: 0.9rem 0 0.9rem 1.2rem;
  margin: 2rem 0;
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--navy);
  color: #D8DAE4;
  padding: 2.6rem 0;
  font-size: 0.88rem;
}
.site-foot a { color: #fff; }
.site-foot :focus-visible { outline-color: var(--gold-lite); }
.site-foot .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 1.8rem; }
.site-foot h2 {
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lite);
  margin-bottom: 0.7rem;
}
.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: 0.4rem; }
.site-foot .fine { margin-top: 2rem; border-top: 1px solid rgba(255,255,255,0.14); padding-top: 1.2rem; color: #9CA3B8; font-size: 0.8rem; }

@media print {
  .masthead, .mainnav, .backbar, .site-foot, .pager, .book-controls, .book-dots { display: none; }
  body { font-size: 12pt; }
}