/* Space Mono is site chrome only. */
@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* The book faces are served from this repo rather than from Google Fonts,
   and they are the exact files the PDF build used
   (DreamingTogether_build/assets/fonts, converted to woff2, which leaves the
   metrics untouched). Google's builds of the same families can differ in
   version and metrics, and any difference there changes where lines break -
   which would put the web text out of step with the printed page. */
@font-face { font-family: "EB Garamond"; font-weight: normal; font-style: normal;
  src: url("assets/fonts/EBGaramond-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; font-weight: bold; font-style: normal;
  src: url("assets/fonts/EBGaramond-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; font-weight: normal; font-style: italic;
  src: url("assets/fonts/EBGaramond-Italic-static.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "EB Garamond"; font-weight: bold; font-style: italic;
  src: url("assets/fonts/EBGaramond-BoldItalic.woff2") format("woff2"); font-display: swap; }

@font-face { font-family: "Courier Prime"; font-weight: normal; font-style: normal;
  src: url("assets/fonts/CourierPrime-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Courier Prime"; font-weight: bold; font-style: normal;
  src: url("assets/fonts/CourierPrime-Bold.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Courier Prime"; font-weight: normal; font-style: italic;
  src: url("assets/fonts/CourierPrime-Italic.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Courier Prime"; font-weight: bold; font-style: italic;
  src: url("assets/fonts/CourierPrime-BoldItalic.woff2") format("woff2"); font-display: swap; }

/* Korean. unicode-range confines these to Hangul so Latin never reaches them
   and the body stays EB Garamond - same guard the PDF build uses. */
@font-face { font-family: "Noto Serif KR"; font-weight: normal; font-style: normal;
  src: url("assets/fonts/NotoSerifKR-Regular.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3; font-display: swap; }
@font-face { font-family: "Noto Serif KR"; font-weight: bold; font-style: normal;
  src: url("assets/fonts/NotoSerifKR-Bold.woff2") format("woff2");
  unicode-range: U+1100-11FF, U+3130-318F, U+AC00-D7A3; font-display: swap; }

/* --- Root & body: ensure full-height and map gradient to viewport --- */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Always reserve the scrollbar gutter so centered content (e.g. the nav) lines
   up identically whether or not a page is tall enough to scroll. */
html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

/* Selection in the site accent */
::selection {
  background: #bcd2e8;
  color: #101820;
}

/* Visible keyboard focus (buttons set outline:none for mouse use) */
nav a:focus-visible,
.manifesto-btn:focus-visible,
.share-btn:focus-visible,
.thread-link-btn:focus-visible,
.share-item:focus-visible {
  outline: 2px solid #bcd2e8;
  outline-offset: 2px;
}

/* Put the gradient in a fixed pseudo element so it maps exactly to the viewport */
body::before {
  content: "";
  position: fixed;
  inset: 0;              /* top, right, bottom, left = 0 */
  z-index: 0;            /* bottom-most visible layer */
  background: linear-gradient(180deg, #222d3a 0%, #101820 100%);
  background-size: cover;
  background-attachment: fixed;
  pointer-events: none;
}

body {
  position: relative; /* so ::before stacking works */
  display: flex;
  flex-direction: column;
  font-family: 'Space Mono', 'Courier New', monospace;
  color: #f8f8f8;
  background: transparent; /* gradient now handled by ::before */
}

/* Keep navigation and UI controls in Space Mono */
nav,
.manifesto-btn,
.share-btn,
.thread-link-btn,
.share-item,
.footer-copy,
.footer-viewcount,
button,
textarea,
input {
  font-family: 'Space Mono', 'Courier New', monospace;
}

/* The index hero is the book's title page, so it takes the book's face */
.index-page .hero-title,
.index-page .hero-subtitle,
.index-page .hero-desc {
  font-family: 'EB Garamond', Garamond, Georgia, 'Times New Roman', serif;
}

/* --- Infinity background: put it above the page background but under content --- */
.infinity-bg {
  position: fixed;
  inset: 0; /* shorthand for top:0; right:0; bottom:0; left:0; */
  background: url("infinity_symbol.png") no-repeat calc(50% + 45px) center;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0; /* NO negative z-index — sits above root background */
}

/* Make page elements sit above the infinity background */
nav, .hero, main, footer {
  position: relative; /* creates stacking context for z-index to work */
  z-index: 1;
}

/* Reduce/clarify the hero overlay so it doesn't wash the background too much */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  /* use rgba for predictable alpha and slightly lower overall opacity */
  background-image:
    radial-gradient(circle at 50% 40%, rgba(41,72,118,0.12) 0%, rgba(24,24,24,1) 100%);
  background-size: cover;
  opacity: 0.12; /* reduce if still too light */
  z-index: 0;
  pointer-events: none;
}

main {
  flex: 1;               /* ensures main grows to fill space */
  margin: 0 auto;
  padding: 0 0 2rem 0;
  max-width: 800px;
}


footer {
  margin-top: 0;
  flex-shrink: 0;
  background: #101820;
}



/* Navigation */
nav {
  background: #101820;
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
  gap: 2rem;
  align-items: center;
  box-shadow: 0 2px 8px rgba(34,45,58,0.18);
  position: relative;
}
nav a {
  color: #f8f8f8;
  text-decoration: none;
  font-weight: 700;
  font-family: inherit;
  font-size: 1.1em;
  letter-spacing: 0.04em;
  transition: color 0.2s;
  padding: 4px 8px;
  border-radius: 4px;
  position: relative;
}
/* Animated underline that slides in on hover/focus */
nav a::after {
  content: "";
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 0;
  height: 2px;
  background: #bcd2e8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s ease;
}
nav a:hover,
nav a:focus-visible {
  color: #bcd2e8;
}
nav a:hover::after,
nav a:focus-visible::after {
  transform: scaleX(1);
}

/* Footer/banner: viewcount left, copyright right */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 2rem;
  background: #101820;
  color: #f8f8f8;
  margin-top: 0rem;
  font-size: 1em;
  border-top: 1px solid #222d3a;
  box-shadow: 0 -4px 24px rgba(34,45,58,0.12);
  position: relative;
  min-height: 50px;
}
/* Footer text reads as ordinary body copy: same family, same weight and size
   as the rest of the page. It was bolder and larger, which made it look like
   a different typeface. */
.footer-copy {
  margin: 0;
  font-weight: 400;
  letter-spacing: normal;
}
.footer-viewcount {
  background: transparent;
  color: #f8f8f8;
  font-size: 1em;
  font-weight: 400;
}
@media (max-width: 900px) {
  footer {
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 1.2rem 1rem;
    min-height: 50px;
  }
}

/* HERO Section */
.hero {
  position: relative;
  text-align: center;
  padding: 1rem 2rem 2.5rem 2rem;
  margin-top: 0rem;
  margin-bottom: 2rem;
  background: transparent;
  box-shadow: 0 4px 32px rgba(34,45,58,0.20);
  border-radius: 16px;
  overflow: hidden;

  /* NEW: make hero fill the remaining viewport height */
  min-height: calc(100vh - 120px); /* adjust 120px to match nav+footer height */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, #29487640 0%, #181818 100%);
  background-size: cover;
  opacity: 0.18;
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: heroFade 0.8s ease both;
}
.hero-title {
  font-size: 3rem;
  font-weight: 700;
  color: #bcd2e8;
  margin-bottom: 0.4em;
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); /* lift the title off the black hole */
}
.hero-subtitle {
  display: block;
  font-size: 1.1rem;
  color: #f8f8f8;
  font-weight: 700;
  margin-bottom: 1.2em;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* One-time entrance for the hero (no ongoing cost) */
@keyframes heroFade {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-content { animation: none !important; }
}
.hero-desc {
  font-size: 1.15rem;
  color: #f8f8f8;
  margin-bottom: 2em;
}

/* Manifesto + Share buttons inside hero */
.hero-actions {
  display: flex;
  gap: 1.2rem;
  margin-top: 1rem;
  justify-content: center;
}

.manifesto-btn,
.share-btn {
  background: #353c48;
  color: #bcd2e8;
  border: none;
  border-radius: 9px;
  padding: 0.9rem 1.6rem;
  font-weight: 700;
  font-size: 1.08em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(34,45,58,0.10);
  transition: background 0.2s, color 0.18s, transform 0.14s;
  margin: 0 0.2em;
  outline: none;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.manifesto-btn:hover,
.share-btn:hover {
  background: #bcd2e8;
  color: #232a35;
  transform: scale(1.08);
}

.share-btn:active {
  background: #294876;
  color: #f8f8f8;
}

/* Special override to give Share its blue Reddit-ish look */
.share-btn {
  background: #3b5a92;
  color: #fff;
}

.share-btn:hover {
  background: #4466a8;
  color: #fff;
}

/* Uniform hero button sizing so Download / View / Share are symmetrical */
.hero-actions .manifesto-btn,
.hero-actions .share-btn {
  min-width: 160px;
  justify-content: center;
}

/* Wrapper to contain button + dropdown */
.share-wrapper {
  position: relative;
  display: inline-block;
}

/* Dropdown menu */
.share-menu {
  display: none;
  position: absolute;
  top: 115%;
  left: 0;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 8px;
  padding: 6px 0;
  min-width: 180px;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Share menu items */
.share-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #eee;
  text-decoration: none;
  background: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  transition: background 0.2s ease, color 0.2s ease;
}

.share-item i {
  font-size: 16px;
  width: 18px;
  text-align: center;
}

/* Hover states (Reddit-style accents) */
.share-item:hover {
  background: #2a2a2a;
  color: #fff;
}

.share-item.fb:hover { color: #1877F2; }
.share-item.tw:hover { color: #1DA1F2; }
.share-item.tb:hover { color: #35465C; }
.share-item.copy:hover { color: #00c853; }


/* Headings */
h1 {
  color: #bcd2e8;
  font-family: inherit;
  font-weight: 700;
  font-size: 2.5em;
  line-height: 1.2em;
}
.manifesto-subtitle {
  display: block;
  color: #f8f8f8;
  font-size: 1em;
  font-weight: 700;
  margin-top: 0.3em;
  letter-spacing: 0.05em;
}
h2, h3 {
  color: #f8f8f8;
  font-family: inherit;
  font-weight: 700;
}

/* Sections */
section {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #222d3a;
}

/* Author Photos */
.author-photo {
  width: 140px;
  height: 140px;
  object-fit: cover;
  aspect-ratio: 1/1;
  border-radius: 8px;
  margin-bottom: 1rem;
  border: 2px solid #bcd2e8;
  background: #222;
  filter: grayscale(0%);
  box-shadow: 0 4px 24px rgba(34,45,58,0.22);
  transition: filter 0.3s, transform 0.15s;
}
.author-photo:hover {
  filter: grayscale(100%);
  transform: scale(1.06);
  box-shadow: 0 8px 32px rgba(34,45,58,0.28);
}

/* ----- THREADS PAGE ----- */
.threads-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.thread-window {
  background: #232a35;
  border-radius: 12px;
  box-shadow: 0 2px 16px rgba(34,45,58,0.22);
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 92px;
  border: 2px solid #353c48;
  transition: box-shadow 0.15s, border-color 0.18s;
}
.thread-window:hover {
  box-shadow: 0 6px 32px rgba(34,45,58,0.33);
  border-color: #bcd2e8;
}
.thread-info {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.thread-comments {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #e8ecf0;
  font-size: 1.1em;
  font-weight: 600;
}
.thread-blurb {
  color: #dce2e8;
  font-size: 1em;
  font-style: italic;
  max-width: 340px;
}
/* Comfortable reading rhythm for thread comments */
.comment-body {
  line-height: 1.6;
}
.thread-link-btn {
  background: #353c48;
  color: #bcd2e8;
  border: none;
  border-radius: 9px;
  padding: 0.9rem 1.3rem;
  font-weight: 700;
  font-size: 1em;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(34,45,58,0.10);
  transition: background 0.2s, color 0.18s, transform 0.16s;
}
.thread-link-btn:hover {
  background: #bcd2e8;
  color: #232a35;
  transform: scale(1.08);
}

@media (max-width: 900px) {
  nav {
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
  }
  main {
    padding: 1rem 0 0 0;
  }
  footer {
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 1.2rem 1rem;
    min-height: 50px;
  }
  .footer-viewcount {
    position: static;
    margin-top: 1rem;
    right: unset;
    bottom: unset;
  }
  .author-photo {
    width: 100px;
    height: 100px;
  }
  .hero {
    padding: 2.5rem 1rem 2rem 1rem;
  }
  .hero-title {
    font-size: 2.1rem;
  }
  .hero-subtitle {
    font-size: 1.15rem;
  }
  .thread-blurb {
    max-width: 180px;
    font-size: 0.95em;
  }
  .thread-window {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    min-height: 110px;
    padding: 1rem;
  }
  .hero-actions {
    flex-direction: column;
    gap: 0.6rem;
  }
}

/* Remove default link underline */
a, a:visited, a:active {
  text-decoration: none;
  color: inherit;
}