/* 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;
  --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, .wordmark, .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;
  gap: 16px;
  min-height: 58px;
}

.wordmark {
  color: var(--orange);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.14em;
}
.wordmark:hover { text-decoration: none; color: #ffa733; }

.barlinks { display: flex; gap: 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; }

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);
}

/* 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; }

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

.prose figure {
  margin: 2em calc(50% - 50vw);
  width: 100vw;
  max-width: 100vw;
}
.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; gap: 18px; font-size: 15px; }

@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; }
}