:root {
  --content: hsl(67, 100%, 89%);
  --background: hsl(134, 77%, 9%);
  --background-alpha: hsla(126, 68%, 25%, 0.5);
  /* Home page dynamic gradient variables */
  --home-fade-end: 100svh; /* Point where gradient becomes fully opaque */
  --content-max-width: 650px; /* Max width for content columns */
  --font-header: "Londrina Solid", sans-serif;
  --font-body: "Lato", sans-serif;
}
/* Large screens: wider content columns. */
@media (min-width: 900px) {
  :root {
    --content-max-width: 700px;
  }
}

* {
  box-sizing: border-box;
}

/* Ensure no horizontal overflow for all elements */
img,
video,
canvas,
iframe,
table {
  max-width: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  background-color: var(--background);
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--content);
  position: relative;
  overflow-x: hidden;
  width: 100%;
}

a,
a:visited,
a:hover,
a:active,
a:focus {
  color: inherit;
}

main {
  position: relative;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100vw;
}

/* canvas {
  width: 100em;
  height: 50em;
} */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0.4rem 2rem;
  box-sizing: border-box;
  position: fixed;
  left: 0;
  z-index: 1000;
  max-width: 100%;
  backdrop-filter: blur(5px);
}

header {
  font-family: var(--font-header);
  font-size: 3rem;
  top: 0;
}

header {
  color: var(--content);
  text-decoration: none;
}

header a {
  text-decoration: none;
}

/* Menu */
.menu-button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 1rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 1002;
  position: relative;
}

.menu-button span {
  display: block;
  width: 2rem;
  height: 0.2rem;
  background-color: var(--content);
  transition: all 0.3s ease;
}

.menu-button[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(0.6rem) rotate(45deg);
}

.menu-button[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  visibility: hidden;
}

.menu-button[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-0.6rem) rotate(-45deg);
}

/* Navigation Overlay */
.nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.nav-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.nav-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  gap: 1rem;
}

.nav-content a {
  font-family: var(--font-body);
  font-size: 1.8rem;
  color: var(--content);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.nav-content a:hover {
  opacity: 0.7;
}

/* Site footer */
.site-footer {
  position: relative;
  z-index: 3;
  background-color: hsl(134, 60%, 5%);
  border-top: 1px solid hsla(67, 60%, 70%, 0.12);
  padding: 4rem 2rem 2rem;
  margin-top: 4rem;
}

.footer-inner {
  max-width: 1000px;
  margin: 0 auto;
}

.footer-columns {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1.5fr;
  gap: 3rem;
}

.footer-heading {
  font-family: var(--font-header);
  font-size: 1.3rem;
  margin: 0 0 1.2rem;
  opacity: 0.7;
  letter-spacing: 0.05em;
}

.footer-text {
  font-size: 0.95rem;
  line-height: 1.7;
  opacity: 0.7;
  margin: 0;
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-links a {
  text-decoration: none;
  font-size: 1rem;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

.footer-links a:hover {
  opacity: 1;
}

.footer-bottom {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 3rem;
  font-size: 0.85rem;
  opacity: 0.5;
}

.footer-credit a {
  text-decoration: none;
}

.footer-credit a:hover {
  opacity: 0.8;
}

@media (max-width: 768px) {
  .footer-columns {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .footer-bottom {
    justify-content: center;
  }
}

.page-links {
  position: absolute;
  top: 6rem;
  left: 1rem;

  display: flex;
  gap: 0.5rem;

  background: var(--background-alpha);
  backdrop-filter: blur(10px);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.2);

  z-index: 100;
}

.page-links a {
  text-decoration: none;
  color: var(--content);
  font-size: 1rem;
  padding: 0.1rem 0.8rem;
}

.message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100vh - 4rem);
  padding: 0 2rem;
}

.share-description {
  max-width: 22rem;
  text-align: center;
}

.blog {
  display: flex;
  flex-direction: column;
  align-items: left;
  margin: 6rem 2rem;
  max-width: 40rem;
}
.blog h2 a {
  text-decoration: none;
}

.blog article {
  font-size: 1.3rem;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  border-bottom: 0.1rem solid var(--content);
}

.post-sub {
  font-size: 0.8rem;
  color: var(--content);
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

.post-sub img.author {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
}

.blog video,
.blog img {
  width: 100%;
  height: auto;
  display: block;
}

.pager {
  display: flex;
  justify-content: space-between;
}
.pager a {
  text-decoration: none;
}
.pager span {
  visibility: hidden;
}

/* Home page specific styles */
.home-content {
  position: relative;
  margin-top: 0;
  padding: 2rem;
  padding-top: 105vh;
  padding-top: 105svh;
  width: 100%;
  max-width: 2000px;
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  min-height: 100svh;
  scroll-margin-top: -95vh;
  scroll-margin-top: -95svh;
}

.home-content::before {
  content: "";
  position: absolute;
  top: 100vh;
  top: 100svh;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--background);
  z-index: 1;
}

.home-fade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--home-fade-end);
  background-image: var(--home-fade-image);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

.home-content article {
  position: relative;
  z-index: 3;
  font-size: 1.3rem;
  max-width: var(--content-max-width);
  margin: 1rem auto;
}

.home-content h2 {
  margin-top: 0;
}

.home-quip {
  margin-bottom: 3rem;
}

.home-quip h3 {
  font-family: var(--font-header);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-bottom: 0.75rem;
}

.home-quip p {
  font-size: 1.1rem;
  line-height: 1.7;
  opacity: 0.85;
}

.home-video {
  display: block;
  width: 100%;
  border-radius: 0.5rem;
  margin: 3rem 0;
}

/* Stats display */
.stats-display {
  font-family: var(--font-header);
  position: absolute;
  top: 16vh;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--content-max-width);
  padding: 0 2rem;
  text-align: center;
  font-size: clamp(1rem, 5vw, 1.7rem);
  z-index: 100;
}

.stats-text {
  display: inline;
  color: var(--content);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* Highlighted words inside localized ticker text (`**word**` in the
   locale files). `clone` gives every wrapped fragment its own padding and
   rounded ends instead of only the first and last. The negative margin
   cancels the horizontal padding, so the background bleeds past the word
   (roughly a space wide) without pushing neighbouring words away. */
.stats-text .stat-hl {
  background: hsl(134, 50%, 12%);
  padding: 0.05em 0.25em;
  margin: 0 -0.25em;
  border-radius: 0.25em;
  text-shadow: none;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.stats-display .lead {
  margin-bottom: 1rem;
  color: var(--content);
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Hero headline: same font and color as the lead, just larger. Each
   line is its own localized string so translations control the break. */
.stats-display .hero-title {
  font-family: inherit;
  font-weight: 400;
  /* Sized so each line ("Shape a species." is ~6.3em wide in Londrina
     Solid) fits the lead's content width on one line: the viewport minus
     the 2rem side padding on small screens, 5.5rem on larger ones. */
  font-size: min(5.5rem, calc((100vw - 4rem) / 6.6));
  /* Tight leading keeps the extra size from adding space above the
     headline. */
  line-height: 1;
  margin: 0 0 1.25rem;
  color: var(--content);
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.55);
}

.stats-display .hero-title-line {
  display: block;
}

/* Narrower than the headline so the description breaks onto two even
   lines earlier instead of leaving a lone word on the second. */
.stats-display .lead p {
  font-size: 1.25em;
  max-width: 16em;
  margin-left: auto;
  margin-right: auto;
  text-wrap: balance;
}

.stats-text.visible {
  opacity: 1;
}

.stats-text.visible.fade-out {
  opacity: 0;
}

.stats-cta {
  position: absolute;
  top: 70vh;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  text-align: center;
  /* Absolutely positioned at left: 50%, so without this the box only gets
     half the viewport and the button text wraps on small screens. */
  white-space: nowrap;
}

/* The hero lead and its CTA are both absolutely positioned at fixed vh
   offsets over the live canvas. On small or short viewports the lead can
   grow tall enough to run into the CTA, so tighten the lead and pull the
   offsets together to keep them clear of each other. */
@media (max-width: 600px) {
  .stats-display {
    top: 16vh;
    font-size: clamp(1rem, 4.5vw, 1.4rem);
  }
}

/* Short desktop/laptop windows (e.g. 1366x657): the two-line headline
   would otherwise push a long ticker line into the CTA, which stays at
   its fixed offset. Start the lead higher and use a smaller headline. */
@media (min-width: 601px) and (max-height: 760px) {
  .stats-display {
    top: 13vh;
  }

  .stats-display .hero-title {
    font-size: min(3.75rem, calc((100vw - 4rem) / 6.6));
    margin-bottom: 1rem;
  }
}

@media (max-height: 600px) {
  .stats-display {
    top: 15vh;
    font-size: 1rem;
  }

  .stats-display .hero-title {
    font-size: min(2.5rem, calc((100vw - 4rem) / 6.6));
    margin-bottom: 0.75rem;
  }

  .stats-display .lead {
    margin-bottom: 0.5rem;
  }

  .stats-cta {
    top: 72vh;
  }
}

.button a {
  display: inline-block;
  background-color: var(--content);
  font-size: 1rem;
  text-align: center;
  color: var(--background);
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  margin: 0.5rem;
  margin-left: 0;
  text-decoration: none;
}

.button a.secondary {
  color: var(--content);
  font-family: var(--font-header);
  font-weight: 300;
  font-size: 1.2rem;
  background-color: transparent;
}

/* Larger primary button, e.g. the home hero CTA. */
.button a.large {
  font-size: 1.2rem;
  font-weight: 300;
  font-family: var(--font-header);
  padding: 0.85rem 1.75rem;
}

/* Email signup form */
.email-signup {
  margin-top: 1rem;
  margin-bottom: 0;
}

.email-signup-form {
  display: flex;
}

.email-signup-bar {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 560px;
  border: 1px solid var(--content);
  border-radius: 0.5rem;
  overflow: hidden;
}

.email-signup-field-wrap {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-width: 0;
}

.email-signup-field {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  background-color: transparent;
  color: var(--content);
  outline: none;
  width: 100%;
  min-width: 0;
}

.email-signup-field::placeholder {
  color: var(--content);
  opacity: 0.5;
}

.email-signup-bar button {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.5rem 1rem;
  border: none;
  background-color: var(--content);
  color: var(--background);
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.email-signup-bar button:hover {
  opacity: 0.85;
}

.email-signup-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.email-signup-message {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  min-height: 1.2em;
}

.email-signup-message:empty {
  display: none;
}

.email-signup-message.success {
  color: var(--content);
}

.email-signup-message.error {
  color: hsl(0, 80%, 70%);
}