/* =========================================================================
   Bro 2 Bro — the notes
   Parchment notes drifting forward out of a maroon room.
   ========================================================================= */

:root {
  /* the room */
  --ink-0:    #100409;
  --ink-1:    #1a0710;
  --maroon:   #43101f;
  --maroon-2: #6b1526;
  --red:      #c0384a;
  --red-soft: #e0687a;
  --gold:     #c9a227;

  /* the paper */
  --paper:    #f4ebdc;
  --paper-2:  #ece0cd;
  --paper-3:  #e2d3ba;
  --ink:      #2b1a19;
  --ink-mid:  #6d5348;
  --ink-thin: rgba(43, 26, 25, .14);

  --shadow: 0 34px 70px -28px rgba(0,0,0,.85), 0 6px 18px -8px rgba(0,0,0,.6);
  --radius: 6px;

  --display: "Fraunces", Georgia, serif;
  --body:    "Newsreader", Georgia, serif;
  --mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  --t-body:   clamp(16px, 1.05vw + 13px, 19px);
  --t-title:  clamp(26px, 3.4vw + 12px, 46px);
  --t-hero:   clamp(44px, 9vw + 8px, 104px);
  --t-mono:   clamp(10px, .4vw + 9px, 12px);

  --bar-h: 60px;
  --wrap: 640px;

  /* one ruled line of the paper. Body text, headings and paragraph gaps are
     all multiples of this, so the writing sits on the lines. */
  --rule: clamp(28px, 1.2vw + 23px, 32px);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ink-0);
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.56;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* the room itself: a maroon glow behind everything, fixed so it never scrolls */
body::before {
  content: "";
  position: fixed;
  inset: -10vh -10vw;
  z-index: -3;
  background:
    radial-gradient(70% 48% at 50% 0%,   rgba(150, 30, 55, .40) 0%, transparent 62%),
    radial-gradient(52% 42% at 84% 22%,  rgba(105, 21, 38, .34) 0%, transparent 60%),
    radial-gradient(60% 50% at 12% 70%,  rgba(67, 16, 31, .40) 0%, transparent 64%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-0) 55%, #0b0307 100%);
}

/* vignette, keeps the eye in the middle where the note is */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 45%, transparent 40%, rgba(6,2,4,.72) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  opacity: .30;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

::selection { background: rgba(192, 56, 74, .35); color: #fff; }

/* -------------------------------------------------------------------------
   Notes drifting in the background
   ------------------------------------------------------------------------- */
.drift { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }

.ghost {
  position: absolute;
  width: clamp(120px, 15vw, 210px);
  aspect-ratio: 3 / 4;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgba(244,235,220,.09), rgba(244,235,220,.03)),
    repeating-linear-gradient(180deg, transparent 0 13px, rgba(244,235,220,.06) 13px 14px);
  border: 1px solid rgba(244,235,220,.10);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  transform: translate3d(0,0,0) rotate(var(--rot, 0deg));
  will-change: transform, opacity;
}
.ghost::before {
  content: "";
  position: absolute;
  left: 12%; right: 42%; top: 12%;
  height: 3px;
  border-radius: 2px;
  background: rgba(224, 104, 122, .30);
}

/* -------------------------------------------------------------------------
   Top bar
   ------------------------------------------------------------------------- */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  height: var(--bar-h);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 0 clamp(14px, 3vw, 26px);
  background: linear-gradient(180deg, rgba(16,4,9,.94), rgba(16,4,9,.55) 70%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transform: translateY(0);
  transition: transform .35s ease, opacity .35s ease;
}
.bar.is-hidden { transform: translateY(-100%); opacity: 0; }

.bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--paper);
  text-decoration: none;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.bar-mark {
  width: 12px; height: 15px;
  border-radius: 2px;
  background: var(--paper);
  box-shadow: 3px 3px 0 0 var(--red);
  flex: none;
}

.bar-where {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,235,220,.52);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bar-acts { display: flex; gap: 8px; align-items: center; }

.bar-rail {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(244,235,220,.10);
}
.bar-rail i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--red), var(--red-soft));
  box-shadow: 0 0 14px rgba(192,56,74,.8);
}

/* -------------------------------------------------------------------------
   Buttons
   ------------------------------------------------------------------------- */
.btn {
  white-space: nowrap;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 10px 16px;
  min-height: 40px;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  touch-action: manipulation;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-solid { background: var(--paper); color: #2b1a19; }
.btn-ghost { background: transparent; color: rgba(244,235,220,.82); border-color: rgba(244,235,220,.28); }
.btn-lg { min-height: 50px; padding: 14px 24px; }
.btn-sm { min-height: 34px; padding: 7px 12px; }
.btn:active { transform: translateY(1px); }
@media (hover: hover) {
  .btn-solid:hover { background: #fff; }
  .btn-ghost:hover { border-color: var(--red-soft); color: #fff; }
}

/* -------------------------------------------------------------------------
   Hero
   ------------------------------------------------------------------------- */
.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: calc(var(--bar-h) + 32px) 20px 72px;
  position: relative;
}

.hero-eyebrow {
  margin: 0 0 22px;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(244,235,220,.5);
}
.hero-eyebrow span { color: var(--red-soft); }

.hero-title {
  margin: 0;
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.025em;
  color: #fbf4e8;
  text-wrap: balance;
  text-shadow: 0 24px 60px rgba(0,0,0,.6);
}

.hero-sub {
  margin: 24px auto 0;
  max-width: 34ch;
  color: rgba(244,235,220,.72);
  font-size: clamp(17px, 1.1vw + 14px, 21px);
  text-wrap: balance;
}

.hero-note {
  margin: 26px 0 0;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(244,235,220,.42);
}
.hero-note b { color: var(--red-soft); font-weight: 500; }

.hero-acts {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.hero-meta {
  margin: 30px 0 0;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(244,235,220,.34);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 26px;
  width: 1px;
  height: 54px;
  background: linear-gradient(180deg, transparent, rgba(244,235,220,.35));
  overflow: hidden;
}
.hero-scroll span {
  position: absolute;
  inset: 0;
  background: var(--red-soft);
  animation: fall 2.4s cubic-bezier(.6,.05,.3,1) infinite;
}
@keyframes fall {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}

/* -------------------------------------------------------------------------
   Part dividers
   ------------------------------------------------------------------------- */
.part {
  min-height: 62svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 20px;
}
.part-n {
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--red-soft);
  margin: 0 0 14px;
}
.part-t {
  margin: 0;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(30px, 5.4vw + 8px, 62px);
  line-height: 1.02;
  letter-spacing: -.02em;
  max-width: 16ch;
  color: rgba(251,244,232,.92);
  text-wrap: balance;
}
.part-rule {
  margin-top: 26px;
  width: 64px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
}

/* -------------------------------------------------------------------------
   The notes
   ------------------------------------------------------------------------- */
#river { padding-bottom: 10svh; }

.slot {
  padding: clamp(28px, 6vh, 70px) clamp(14px, 4vw, 28px);
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

.note {
  position: relative;
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: clamp(26px, 4.4vw, 46px) clamp(20px, 4.4vw, 46px) clamp(20px, 3vw, 32px);
  border-radius: var(--radius);
  color: var(--ink);
  background:
    linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid rgba(43,26,25,.16);
  box-shadow: var(--shadow);
  transform-origin: 50% 30%;
  transform: translate3d(0,0,0);
  will-change: transform, opacity, filter;
}

/* the margin line every notebook has */
.note::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(12px, 2.2vw, 22px);
  width: 1px;
  background: rgba(192,56,74,.22);
  pointer-events: none;
}

.note-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin-bottom: 18px;
}
.note-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 0 3px rgba(192,56,74,.16);
  flex: none;
}
.note-n { color: var(--ink); font-weight: 500; white-space: nowrap; }
.note-ch {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: .8;
}

.note-kicker {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}

.note-title {
  margin: 0 0 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: var(--t-title);
  line-height: 1.06;
  letter-spacing: -.018em;
  color: #23110f;
  text-wrap: balance;
}

.note-body {
  /* ruled paper. The bands line up with the line boxes because both are
     var(--rule) tall and the block starts at band zero. */
  background: repeating-linear-gradient(
    180deg,
    transparent 0 calc(var(--rule) - 1px),
    var(--ink-thin) calc(var(--rule) - 1px) var(--rule)
  );
  line-height: var(--rule);
}

.note-body > p {
  margin: 0 0 var(--rule);
  color: #33201d;
}
.note-body > p:last-child { margin-bottom: 0; }
.note-body > p.lead::first-letter {
  font-family: var(--display);
  font-size: calc(var(--rule) * 1.9);
  font-weight: 600;
  line-height: 1;
  float: left;
  margin: 0 .08em 0 0;
  color: var(--maroon);
}
.note-body h3 {
  margin: var(--rule) 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.14em;
  line-height: var(--rule);
  letter-spacing: -.01em;
  color: #23110f;
}
.note-body h4 {
  margin: var(--rule) 0 0;
  font-family: var(--mono);
  font-weight: 500;
  font-size: var(--t-mono);
  line-height: var(--rule);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-mid);
}


.note-foot {
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid rgba(43,26,25,.16);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.note-link {
  color: var(--maroon);
  text-decoration: none;
  border-bottom: 1px solid rgba(67,16,31,.35);
  padding-bottom: 2px;
  min-height: 24px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
@media (hover: hover) { .note-link:hover { color: var(--red); border-color: var(--red); } }
.note-next {
  background: none;
  border: 0;
  padding: 6px 0;
  min-height: 32px;
  font: inherit;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) { .note-next:hover { color: var(--red); } }

/* chapter openers: same paper, marked with a red band and a gold seal */
.note.is-chapter {
  background: linear-gradient(180deg, #f7f0e3 0%, var(--paper-2) 100%);
  border-color: rgba(67,16,31,.30);
}
.note.is-chapter .note-title { font-size: calc(var(--t-title) * 1.08); }
.note.is-chapter .note-kicker { color: var(--maroon); }
.note.is-chapter::after { background: rgba(192,56,74,.42); width: 2px; }
.chapter-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  border-radius: var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, var(--maroon), var(--red) 55%, var(--gold));
}

/* -------------------------------------------------------------------------
   End card
   ------------------------------------------------------------------------- */
.end {
  min-height: 88svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 60px 20px 90px;
}
.end-stamp {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red-soft);
}
.end-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(30px, 5.2vw + 10px, 58px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #fbf4e8;
  text-wrap: balance;
}
.end-body {
  margin: 20px auto 0;
  max-width: 42ch;
  color: rgba(244,235,220,.68);
}
.end-sign {
  margin: 40px 0 0;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(244,235,220,.38);
}
.end-sign a { color: inherit; }
.end-sign span { color: var(--red-soft); }

/* -------------------------------------------------------------------------
   Chapter rail (desktop)
   ------------------------------------------------------------------------- */
.rail {
  position: fixed;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 15;
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 12px 6px;
}
.rail button {
  position: relative;
  width: 26px; height: 14px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.rail button i {
  display: block;
  height: 2px;
  width: 12px;
  border-radius: 2px;
  background: rgba(244,235,220,.3);
  transition: width .25s ease, background .25s ease;
}
.rail button.is-on i { width: 24px; background: var(--red-soft); }
.rail button span {
  position: absolute;
  right: 34px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,235,220,.8);
  background: rgba(16,4,9,.9);
  border: 1px solid rgba(244,235,220,.14);
  border-radius: 999px;
  padding: 5px 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
@media (hover: hover) {
  .rail button:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
  .rail button:hover i { background: var(--paper); }
}

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

.sheet {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(9,2,5,.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  animation: fade .25s ease;
}

.sheet-panel {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(24px, 4vw, 38px);
  border-radius: var(--radius);
  color: var(--ink);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border: 1px solid rgba(43,26,25,.16);
  box-shadow: var(--shadow);
  animation: rise .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes rise { from { transform: translateY(14px); opacity: .4; } to { transform: none; opacity: 1; } }

.sheet-title {
  margin: 6px 0 14px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(22px, 2.6vw + 12px, 32px);
  line-height: 1.08;
  letter-spacing: -.018em;
  color: #23110f;
  text-wrap: balance;
}
.sheet-body { margin: 0 0 26px; color: #33201d; }

.sheet-steps {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 620px) { .sheet-steps { grid-template-columns: 1fr 1fr; } }

.sheet-steps h3 {
  margin: 0 0 8px;
  font-family: var(--mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.sheet-steps ol {
  margin: 0;
  padding-left: 1.1em;
  color: #33201d;
  font-size: .96em;
}
.sheet-steps li { margin-bottom: .3em; }
.sheet-steps b { font-weight: 600; }

.sheet-foot {
  margin: 26px 0 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(43,26,25,.16);
  font-family: var(--display);
  font-size: 1.02em;
  color: var(--maroon);
}

/* -------------------------------------------------------------------------
   Contents
   ------------------------------------------------------------------------- */
.toc {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(9,2,5,.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: flex-end;
  animation: fade .25s ease;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.toc-panel {
  width: min(460px, 100%);
  height: 100%;
  background: linear-gradient(180deg, #1d0812, #130510);
  border-left: 1px solid rgba(244,235,220,.12);
  display: flex;
  flex-direction: column;
  animation: slide .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes slide { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }

.toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(244,235,220,.12);
}
.toc-kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(244,235,220,.6);
}
.toc-list { overflow-y: auto; padding: 10px 0 40px; -webkit-overflow-scrolling: touch; }

.toc-part {
  margin: 22px 18px 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--red-soft);
}
.toc-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-left: 2px solid transparent;
  color: rgba(244,235,220,.82);
  font-family: var(--body);
  font-size: 16px;
  padding: 10px 18px;
  min-height: 44px;
  cursor: pointer;
  touch-action: manipulation;
}
.toc-item b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  color: rgba(244,235,220,.34);
  min-width: 22px;
}
.toc-item.is-chapter { color: #fbf4e8; font-family: var(--display); font-weight: 600; margin-top: 6px; }
.toc-item.is-here { border-left-color: var(--red); background: rgba(192,56,74,.12); }
@media (hover: hover) { .toc-item:hover { background: rgba(244,235,220,.06); } }

/* -------------------------------------------------------------------------
   noscript
   ------------------------------------------------------------------------- */
.nojs {
  max-width: var(--wrap);
  margin: 120px auto;
  padding: 28px;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius);
}
.nojs a { color: var(--maroon); }

/* -------------------------------------------------------------------------
   Sizes
   ------------------------------------------------------------------------- */
@media (min-width: 700px) {
  .note-body > p.lead::first-letter { font-size: 3.4em; }
}

@media (min-width: 1080px) {
  :root { --bar-h: 68px; }
  .rail { display: flex; }
  #river { padding-right: 0; }
}

.btn .narrow { display: none; }

/* the other Hamcodes sites only fit in the bar on a wide screen. Everywhere
   else they live in the contents drawer and on the closing card. */
.bar-wide { display: none; }
@media (min-width: 1080px) { .bar-wide { display: inline-flex; } }

.toc-more {
  margin-top: 8px;
  padding: 18px 18px 30px;
  border-top: 1px solid rgba(244,235,220,.12);
}
.toc-more .toc-part { margin: 0 0 10px; }
.toc-more a {
  display: block;
  padding: 9px 0;
  min-height: 40px;
  color: rgba(244,235,220,.78);
  text-decoration: none;
  font-size: 15px;
}
@media (hover: hover) { .toc-more a:hover { color: var(--red-soft); } }

.end-more {
  margin-top: 34px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  font-family: var(--mono);
  font-size: var(--t-mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.end-more a {
  color: rgba(244,235,220,.6);
  text-decoration: none;
  border-bottom: 1px solid rgba(244,235,220,.2);
  padding-bottom: 3px;
  min-height: 24px;
}
@media (hover: hover) { .end-more a:hover { color: #fff; border-color: var(--red-soft); } }

@media (max-width: 560px) {
  .bar-where { display: none; }
  .bar { grid-template-columns: auto 1fr; gap: 8px; }
  .bar-acts .btn { padding: 9px 13px; }
  .btn .wide { display: none; }
  .btn .narrow { display: inline; }
  .hero-acts .btn { width: 100%; }
  .note-foot { flex-direction: column; align-items: flex-start; }
}

/* -------------------------------------------------------------------------
   Motion off
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .drift { display: none; }
  .note { transform: none !important; filter: none !important; opacity: 1 !important; }
}

/* dialogue, the way the book opens most pages */
.note-body > p.quote {
  font-style: italic;
  color: #3a1f1c;
  padding-left: 16px;
  border-left: 2px solid rgba(192,56,74,.45);
  margin: 0 0 var(--rule);
}

[hidden] { display: none !important; }

/* The counting statement, always visible, above the footer counter. */
.end-privacy {
  margin: 26px auto 0;
  max-width: 62ch;
  font-size: .84rem;
  line-height: 1.6;
  color: rgba(244, 235, 220, .40);
}
/* The shared counter reads --muted and --line, which this palette does not
   define. Set them on the counter alone rather than inventing global tokens:
   warm, to match the paper, not the cool grey the shared default assumes. */
#visitors {
  --muted: rgba(244, 235, 220, .46);
  --line: rgba(244, 235, 220, .16);
}