/* Bitcoin Hashpoint. One stylesheet, mobile first, no script. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-500.woff") format("woff");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-700.woff") format("woff");
  font-weight: 700;
  font-display: swap;
}

:root {
  --ground: #262220;
  --ground-2: #2f2a27;
  --ground-3: #383230;
  --bone: #ded2be;
  --bone-dim: #9c9184;
  --orange: #f7931a;
  --red: #a81c20;
  --rule: #453d39;
  --measure: 720px;
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  /* The dashboard's own face and header colors, for the brand block and
     the live strip that mirror it. */
  --system: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --dash-text: #e6e8ee;
  --dash-muted: #8a93a6;
  --serif: Charter, "Bitstream Charter", "Iowan Old Style", "Source Serif Pro",
           Georgia, Cambria, "Times New Roman", Times, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--bone);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.6;
}

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

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

h1, h2, h3, h4, .eyebrow, .dateline, .readmore, .pager, .foot-mark {
  font-family: var(--display);
}

/* top bar */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(38, 34, 32, 0.94);
  border-bottom: 1px solid var(--rule);
  backdrop-filter: saturate(140%) blur(6px);
}

.bar-inner, .foot-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}

.bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 24px;
  padding-top: 14px;
  padding-bottom: 14px;
}

/* Brand block, as the dashboard header draws it: the gold coin, then the
   title over the motto, in the dashboard's system face and sizes. */
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--dash-text);
  font-family: var(--system);
}
.brand:hover { text-decoration: none; color: var(--dash-text); }
.brand-logo {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  display: block;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  min-width: 0;
}
.brand-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.4px;
}
.brand-tagline {
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--dash-muted);
  margin-top: 4px;
}

.barlinks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.barlinks a {
  color: var(--bone);
  font-family: var(--display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.barlinks a:hover { color: var(--orange); text-decoration: none; }

/* Phones: the header stacks (brand over nav) and scrolls away with the
   page, so it never holds a third of a small screen. */
@media (max-width: 640px) {
  .topbar { position: static; }
  .bar-inner { padding-top: 12px; padding-bottom: 12px; }
  .barlinks { gap: 8px 14px; }
}

/* Live strip: the dashboard's LIVE bar across the top of every page.
   Values are baked at build time and refreshed from /api/ticker. The
   height is fixed so a refresh never moves the page, and on a narrow
   screen the strip scrolls sideways inside itself. */
.live-strip {
  height: 44px;
  background: linear-gradient(180deg, #1a1208, #11141b);
  border-bottom: 1px solid #4d3a1a;
  color: var(--dash-text);
  font-family: var(--system);
  font-size: 14px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.live-strip::-webkit-scrollbar { display: none; }
.live-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  height: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px;
}
.live-badge {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #f7931a;
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1px solid #f7931a;
  border-radius: 3px;
  background: rgba(247, 147, 26, 0.08);
}
.live-item {
  flex: none;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.live-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dash-muted);
}
.live-num {
  font-size: 17px;
  font-weight: 600;
  color: var(--dash-text);
}
.live-chg { font-size: 13px; font-weight: 600; color: var(--dash-muted); }
.live-btc { color: #f7931a; }
.live-up { color: #16a34a; }
.live-down { color: #dc2626; }
.live-watch { color: #facc15; }
.live-missing { color: var(--dash-muted); font-weight: 400; }

main { display: block; }

/* lead edition */

.lead { border-bottom: 1px solid var(--rule); }

.lead-link { display: block; color: inherit; }
.lead-link:hover { text-decoration: none; }

/* Same rule as .hero img on the post page: the cover is a composed
   1600x900 frame whose top band carries the kicker, date and ticker bar.
   Any crop eats that band, so show the whole thing at the content width
   and let the height follow the ratio. */
.lead-cover {
  display: block;
  width: 100%;
  max-width: 1120px;
  height: auto;
  margin: 0 auto;
  border-bottom: 3px solid var(--red);
}

.lead-body {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 28px 20px 40px;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--red);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.lead-title {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.lead-link:hover .lead-title { color: var(--orange); }

.dateline {
  margin: 0;
  color: var(--bone-dim);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lead-excerpt { margin: 16px 0 20px; color: var(--bone); }

.readmore {
  display: inline-block;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--orange);
  border-bottom: 2px solid var(--red);
  padding-bottom: 3px;
}

/* grids */

.grid-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 40px 20px 8px;
}

.section-rule {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 24px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.section-rule::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.card a { color: inherit; display: block; }
.card a:hover { text-decoration: none; }

.card-cover {
  display: block;
  width: 100%;
  height: auto;
  border-bottom: 2px solid var(--red);
  background: var(--ground-2);
}
/* The blank stand-in has no image to give it height, so it keeps the
   16:9 box the real covers occupy naturally. */
.card-cover-blank {
  display: block;
  aspect-ratio: 16 / 9;
}

.card-title {
  margin: 14px 0 6px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 700;
}
.card a:hover .card-title { color: var(--orange); }

.card-excerpt {
  margin: 10px 0 0;
  font-size: 16px;
  color: var(--bone-dim);
}

/* The Long Game: one swipeable row of essays, newest first and largest.
   Scroll snapping does the work, so touch, trackpad and shift-wheel all
   move it with no script; the arrows are an enhancement for wide screens. */

.long-game { padding-bottom: 32px; }
.long-game .section-rule { margin-bottom: 10px; }

/* The Book of Blocks seal beside the series name: the panel title and the
   italic series line that opens each essay. */
.series-name { display: inline-flex; align-items: center; gap: 10px; }
.series-seal { display: inline-block; vertical-align: middle; flex: none; }
.series-seal img { display: inline-block; width: 28px; height: 28px; }
.prose .series-seal { margin-right: 10px; vertical-align: -8px; }

.series-line {
  margin: 0 0 22px;
  font-style: italic;
  font-size: 17px;
  color: var(--bone-dim);
}

.lg-frame { position: relative; }

.lg-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
}
.lg-track::-webkit-scrollbar { display: none; }
.lg-track:focus { outline: none; }
.lg-track:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.lg-card {
  flex: 0 0 70%;
  min-width: 0;
  scroll-snap-align: start;
}
.lg-feature { flex-basis: 88%; }
.lg-feature .card-cover { border-bottom: 3px solid #f7931a; }
.lg-feature .card-title { font-size: 24px; }
.lg-dek { color: var(--bone); }

.lg-arrow { display: none; }

@media (min-width: 900px) {
  .lg-card { flex-basis: 30%; }
  .lg-feature { flex-basis: 60%; }
  .lg-feature .card-title { font-size: 28px; }
  .lg-arrow {
    position: absolute;
    top: 30%;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0 0 4px;
    border: 1px solid var(--rule);
    border-radius: 50%;
    background: rgba(38, 34, 32, 0.92);
    color: var(--bone);
    font-family: var(--display);
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
  }
  .lg-arrow:hover { color: var(--orange); border-color: var(--orange); }
  .lg-prev { left: 8px; }
  .lg-next { right: 8px; }
  .lg-arrow[hidden] { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-track { scroll-behavior: auto; }
}

/* pagination */

.pager {
  max-width: 1120px;
  margin: 0 auto;
  padding: 36px 20px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pager-count { color: var(--bone-dim); }

/* article */

.post { padding-bottom: 8px; }

.hero { margin: 0; }
/* The cover is a composed 1600x900 image: kicker and ticker bar along the
   top, headline and stat below. Cropping it to a fixed viewport height cut
   the top band off, so the whole frame is shown at the content width and
   the height follows the aspect ratio. No object-fit, no max-height. */
.hero img {
  display: block;
  width: 100%;
  max-width: 1120px;
  height: auto;
  margin: 0 auto;
  border-bottom: 3px solid var(--red);
}

.post-head {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 32px 20px 0;
}

.draft-flag {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 10px;
  background: var(--red);
  color: #fff;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.post-title {
  margin: 0 0 10px;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.prose {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.prose > p { margin: 0 0 1.25em; }

.prose h2 {
  margin: 2em 0 0.6em;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
}
.prose h3 {
  margin: 1.8em 0 0.5em;
  font-size: 20px;
  font-weight: 700;
}

.prose a { border-bottom: 1px solid rgba(247, 147, 26, 0.4); }

.prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--red);
  color: var(--bone-dim);
  font-style: italic;
}

.prose ul, .prose ol { margin: 0 0 1.25em; padding-left: 1.3em; }
.prose li { margin: 0 0 0.5em; }

.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.4em 0; }

.prose code {
  font-size: 0.86em;
  background: var(--ground-3);
  padding: 2px 5px;
  border-radius: 3px;
}
.prose pre {
  background: var(--ground-2);
  border: 1px solid var(--rule);
  padding: 16px;
  overflow-x: auto;
}
.prose pre code { background: none; padding: 0; }

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  margin: 0 0 1.5em;
  display: block;
  overflow-x: auto;
}
.prose th, .prose td {
  border-bottom: 1px solid var(--rule);
  padding: 8px 10px;
  text-align: left;
}
.prose th { font-family: var(--display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }

/* a correction notice: set apart from the article it sits above */

.prose .correction {
  display: block;
  max-width: var(--measure);
  margin: 0 auto 28px;
  padding: 14px 18px;
  border-left: 3px solid var(--red);
  background: var(--ground-2);
  font-family: var(--display);
  font-size: 15px;
  line-height: 1.55;
  color: var(--bone-dim);
}
.prose .correction strong { color: var(--bone); }

/* figures run full width, out of the text measure */

.prose figure {
  margin: 2em calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
.prose figure picture { display: block; }
.prose figure img {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.prose figcaption {
  max-width: var(--measure);
  margin: 12px auto 0;
  padding: 0 20px;
  color: var(--bone-dim);
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-align: center;
}

.fineprint { color: var(--bone-dim); font-size: 16px; }

/* footer */

.sitefoot {
  margin-top: 56px;
  border-top: 1px solid var(--rule);
  background: var(--ground-2);
}
.foot-inner { padding: 32px 20px 40px; }
.foot-mark {
  margin: 0 0 8px;
  color: var(--orange);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
}
.foot-note { margin: 0 0 14px; color: var(--bone-dim); font-size: 15px; }
.foot-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; }

/* signup, rendered only when publish/site.toml carries a Buttondown user */

.signup {
  max-width: var(--measure);
  margin: 48px auto 8px;
  padding: 0 20px;
}
.signup-inner {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  background: var(--ground-2);
  padding: 24px 20px 20px;
}
.signup-title {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.signup-sub { margin: -6px 0 16px; font-size: 16px; line-height: 1.45; color: var(--bone-dim); }
.signup-form { display: flex; flex-wrap: wrap; gap: 10px; }
.signup-label {
  flex: 1 0 100%;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.signup-input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--ground);
  color: var(--bone);
  font: inherit;
  font-size: 16px;
}
.signup-input:focus { outline: 2px solid var(--orange); outline-offset: -2px; }
.signup-button {
  flex: 0 0 auto;
  padding: 12px 18px;
  border: 0;
  background: var(--red);
  color: var(--bone);
  font-family: var(--display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
}
.signup-button:hover { background: var(--orange); color: var(--ground); }
.signup-note { margin: 14px 0 0; font-size: 15px; color: var(--bone-dim); }

@media (min-width: 700px) {
  body { font-size: 19px; }
  .lead-title, .post-title { font-size: 46px; }
  .lead-body { padding: 36px 20px 52px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
}

@media (min-width: 1000px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .lead-title, .post-title { font-size: 54px; }
}

/* The free book: its own page at /salvation-today/ and a card on the
   front page. Mobile first: the cover sits on top, then beside the copy
   from 760px. */

.book {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 20px 8px;
}
.book-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.book-cover-wrap { max-width: 340px; width: 100%; margin: 0 auto; }
.book-cover { width: 100%; height: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.book-body { min-width: 0; }
.book-title {
  margin: 0 0 8px;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.book-subtitle { margin: 0 0 18px; font-style: italic; font-size: 20px; color: var(--bone-dim); }
.book-blurb { margin: 0 0 16px; }
.book-facts { margin: 0 0 24px; }
.book-signup { margin: 0 0 8px; }
.book-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.book-done[hidden], .book-error[hidden], .book-download[hidden], .book-form[hidden] { display: none; }
.book-download { display: inline-block; text-decoration: none; }
.book-download:hover { text-decoration: none; }
.book-inbox { margin: 14px 0 0; font-size: 17px; }
.book-error { margin: 12px 0 0; font-size: 16px; color: var(--orange); }
.book-contents { max-width: var(--measure); margin: 40px auto 0; }
.book-chapters { margin: 0; padding-left: 1.6em; }
.book-chapters li { margin: 0 0 6px; padding-left: 4px; }
.book-chapters li::marker { font-family: var(--display); color: var(--bone-dim); }
.book-appendix { margin: 14px 0 0; font-style: italic; color: var(--bone-dim); }
.book-paper {
  margin: 28px 0 0;
  padding: 18px 20px 20px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  background: var(--ground-2);
}
.book-paper-title { margin: 0 0 10px; font-size: 24px; line-height: 1.15; font-weight: 700; }
.book-paper p { margin: 0 0 12px; font-size: 17px; }
.book-paper p + p { color: var(--bone-dim); }
.book-paper-button { display: inline-block; margin-top: 4px; text-decoration: none; }
.book-paper-button:hover { text-decoration: none; }

.book-card-wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 20px 0;
}
.book-card {
  display: flex;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  background: var(--ground-2);
  padding: 18px;
  color: inherit;
}
.book-card:hover { text-decoration: none; }
.book-card-cover { flex: 0 0 auto; width: 92px; height: auto; }
.book-card-body { min-width: 0; }
.book-card-title { margin: 0 0 6px; font-size: 24px; line-height: 1.15; font-weight: 700; }
.book-card:hover .book-card-title { color: var(--orange); }
.book-card-line { margin: 0 0 14px; font-size: 16px; color: var(--bone-dim); }
.book-card-button { display: inline-block; }
.book-card-paper { margin: 10px 0 0; font-size: 15px; text-align: right; }
.book-card-paper a { color: var(--bone-dim); }
.book-card-paper a:hover { color: var(--orange); }
.book-card:hover .book-card-button { background: var(--orange); color: var(--ground); }

.book-pamphlet { margin: 14px 0 0; }

/* The White Paper Night pamphlet at /white-paper-night/: the book page's
   type and buttons, with the two landscape previews stacked full width. */

.pamphlet-head { max-width: var(--measure); margin: 0 auto; }
.pamphlet-previews { margin: 28px 0 0; }
.pamphlet-preview { margin: 0 0 24px; }
.pamphlet-preview img { display: block; width: 100%; height: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.pamphlet-preview figcaption { margin: 10px 0 0; font-size: 16px; color: var(--bone-dim); }
.pamphlet-downloads { display: flex; flex-wrap: wrap; gap: 14px; max-width: var(--measure); margin: 8px auto 0; }
.pamphlet-rules { margin: 0; padding: 0; list-style: none; }
.pamphlet-rules li { margin: 0 0 6px; }
.pamphlet-closing { font-style: italic; }
.book-card-cover.pamphlet-card-image { width: 132px; }

@media (min-width: 760px) {
  .book-inner { grid-template-columns: 320px minmax(0, 1fr); gap: 44px; align-items: start; }
  .book-cover-wrap { margin: 0; }
  .book-title { font-size: 54px; }
  .book-card { gap: 28px; padding: 22px 28px; }
  .book-card-cover { width: 120px; }
  .book-card-cover.pamphlet-card-image { width: 200px; }
}

/* Signup: the one line under every article, and the /subscribe/ page. */
.post-subscribe {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--rule, rgba(238, 228, 212, 0.15));
  font-size: 16px;
  color: var(--bone-dim);
}
.post-subscribe a { color: var(--orange); }
.subscribe-list { padding-left: 1.2em; }
.subscribe-list li { margin: 0 0 8px; }
.subscribe-box { margin-top: 18px; }
.subscribe-done { margin: 12px 0 0; font-size: 17px; color: var(--bone); }
.subscribe-done[hidden], .subscribe-page .signup-form[hidden] { display: none; }

/* The Book of Days at /book-of-days/ and the node guide at /run-a-node/.
   Tables stack into labeled cards on phones so nothing scrolls sideways. */

.bod {
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px 20px 8px;
}
.bod-head, .bod-section, .bod-source { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.bod-opening { margin: 0; font-size: 21px; line-height: 1.5; }
.bod-next {
  max-width: var(--measure);
  margin: 32px auto 0;
  padding: 22px 22px 18px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--orange);
  background: var(--ground-2);
}
.bod-next-name {
  margin: 0 0 6px;
  font-size: 40px;
  line-height: 1.08;
  font-weight: 700;
  color: var(--orange);
}
.bod-next-when { margin: 0 0 6px; color: var(--bone-dim); font-size: 17px; }
.bod-countdown {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.bod-next-line { margin: 0 0 8px; font-size: 17px; }
.bod-next-turning { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); font-size: 16px; color: var(--bone-dim); }
.bod-section { margin-top: 44px; }
.bod-section h3 { margin: 22px 0 8px; font-size: 18px; }
.bod-note { font-size: 16px; color: var(--bone-dim); }
.bod-table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 16px; line-height: 1.45; }
.bod-table th, .bod-table td { padding: 9px 10px 9px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.bod-table thead th {
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--bone-dim);
}
.bod-table tbody th { font-family: var(--display); font-weight: 700; color: var(--bone); }
.bod-table time { white-space: nowrap; }
.bod-compact td, .bod-compact th { font-variant-numeric: tabular-nums; }
.bod-record h3:first-child { margin-top: 0; }
.bod-year { margin: 0; padding: 0; list-style: none; }
.bod-year li { padding: 7px 0; border-bottom: 1px solid var(--rule); font-size: 17px; }
.bod-year-date { display: inline-block; min-width: 9.5em; font-family: var(--display); font-size: 15px; color: var(--bone-dim); }
.bod-rites { margin: 0; }
.bod-rites div { margin: 0 0 16px; }
.bod-rites dt { font-family: var(--display); font-weight: 700; color: var(--orange); }
.bod-rites dd { margin: 4px 0 0; }
.bod-naming { padding: 14px 16px; border-left: 3px solid var(--orange); background: var(--ground-2); }
.bod-naming strong { font-family: var(--display); color: var(--orange); }
.bod-hal { font-style: italic; }
.bod-rules { padding-left: 1.4em; }
.bod-rules li { margin: 0 0 8px; }
.bod-subscribe { display: flex; flex-wrap: wrap; gap: 10px; }
.bod-add { display: inline-block; text-decoration: none; }
.bod-add:hover { text-decoration: none; }
.bod-copy { cursor: pointer; }
.bod-ics-url { overflow-wrap: anywhere; }
.bod-lock {
  display: inline-block;
  padding: 0 6px;
  border: 1px solid var(--rule);
  font-family: var(--display);
  font-size: 13px;
  color: var(--bone-dim);
}
.bod-lock-locked { border-color: var(--orange); color: var(--orange); }
.bod-source { margin-top: 40px; font-style: italic; color: var(--bone-dim); font-size: 16px; }
.bod-tile { border-top-color: var(--orange); }
.bod-section.bod-wide { max-width: 1080px; }

/* Hal's numbers: the band atop the Book of Days and the panel on /hal/.
   hal-live.js refreshes the figures on load; the built ones stand without it. */
.bod-band {
  max-width: var(--measure);
  margin: 28px auto 0;
  padding: 16px 18px 6px;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--orange);
  background: var(--ground-2);
}
.bod-band-title { margin: 0 0 10px; font-family: var(--display); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.hal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}
.hal-tile { min-width: 0; padding: 10px 12px; border: 1px solid var(--rule); background: var(--ground); }
.hal-tile dt { font-family: var(--display); font-size: 13px; color: var(--bone-dim); }
.hal-tile dd { margin: 4px 0 0; font-family: var(--display); font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hal-why { display: block; margin-top: 2px; font-family: var(--serif); font-size: 13px; font-weight: 400; color: var(--bone-dim); }
.hal-status { margin: 0 0 10px; color: var(--orange); font-family: var(--display); font-size: 15px; }
.bod-metric-label { font-family: var(--display); font-size: 12px; color: var(--orange); }
.bod-metric { display: block; margin-top: 3px; font-family: var(--serif); font-size: 14px; font-weight: 400; color: var(--bone-dim); }
.hal-head { text-align: left; }
.hal-hero { display: block; float: right; margin: 0 0 12px 18px; }
.hal-hero img { display: block; width: 120px; height: 120px; }
.hal-says { clear: none; margin: 10px 0 0; font-size: 21px; line-height: 1.45; }
.hal-says-label { display: block; font-family: var(--display); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange); }
.hal-copy h2 { margin: 36px 0 10px; font-size: 24px; }
.hal-copy li { margin: 0 0 8px; }
.hal-asof { color: var(--bone-dim); }
@media (min-width: 760px) {
  .hal-hero img { width: 180px; height: 180px; }
}
.node-guide pre {
  margin: 10px 0;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--ground-2);
  border: 1px solid var(--rule);
  font-size: 15px;
}
.node-guide code { font-size: 0.88em; overflow-wrap: anywhere; }
.node-guide pre code { overflow-wrap: normal; }
.node-steps li { margin: 0 0 18px; }
.node-facts th { width: 38%; }
.node-sources { font-size: 16px; }

@media (max-width: 699px) {
  .bod-table:not(.bod-compact) thead { display: none; }
  .bod-table:not(.bod-compact), .bod-table:not(.bod-compact) tbody,
  .bod-table:not(.bod-compact) tr { display: block; width: 100%; }
  .bod-table:not(.bod-compact) tr { padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .bod-table:not(.bod-compact) th, .bod-table:not(.bod-compact) td {
    display: block;
    padding: 2px 0;
    border: 0;
  }
  .bod-table:not(.bod-compact) td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--display);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--bone-dim);
  }
  .bod-next-name { font-size: 32px; }
}

@media (min-width: 900px) {
  .bod-record { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; }

}

/* The subscribe popup (js/signup-popup.js): a centered card over a dimmed
   page on desktops, a short bottom sheet on phones, never full screen. */
.hp-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 17, 16, 0.6);
  animation: hp-popup-fade 0.2s ease-out;
}
.hp-popup {
  position: fixed;
  z-index: 91;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-top: 3px solid var(--red);
  background: var(--ground-2);
  color: var(--bone);
  padding: 24px 22px 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
  animation: hp-popup-rise 0.22s ease-out;
}
.hp-popup:focus { outline: none; }
.hp-popup-title {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.hp-popup-sub { margin: 0 0 16px; font-size: 16px; line-height: 1.45; color: var(--bone-dim); }
.hp-popup-form { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-popup-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hp-popup-error { margin: 10px 0 0; font-size: 15px; color: var(--orange); }
.hp-popup-done { margin: 0 0 6px; font-size: 17px; }
.hp-popup-done:focus { outline: none; }
.hp-popup-close {
  display: block;
  margin: 12px auto 0;
  padding: 6px 10px;
  border: 0;
  background: none;
  color: var(--bone-dim);
  font-family: var(--display);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.hp-popup-close:hover { color: var(--bone); }
.hp-popup-close:focus-visible, .hp-popup .signup-button:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}
.hp-popup-form[hidden], .hp-popup-sub[hidden], .hp-popup-error[hidden], .hp-popup-done[hidden] {
  display: none;
}

@media (max-width: 699px) {
  .hp-popup-backdrop { background: rgba(20, 17, 16, 0.35); }
  .hp-popup {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    transform: none;
    width: 100%;
    max-width: none;
    max-height: 34vh;
    padding: 14px 16px 10px;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    animation-name: hp-popup-sheet;
  }
  .hp-popup-title { margin-bottom: 4px; font-size: 18px; }
  .hp-popup-sub { margin-bottom: 10px; font-size: 14px; line-height: 1.35; }
  .hp-popup .signup-input { flex-basis: 160px; padding: 10px 12px; }
  .hp-popup .signup-button { padding: 10px 14px; }
  .hp-popup-close { margin-top: 4px; padding: 4px 8px; }
}

@keyframes hp-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hp-popup-rise {
  from { opacity: 0; transform: translate(-50%, -46%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes hp-popup-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hp-popup, .hp-popup-backdrop { animation: none; }
}