: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 */
}
/* 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: "Lato", sans-serif;
  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: "Krona One", sans-serif;
  font-size: 2rem;
  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: "Lato", sans-serif;
  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: "Krona One", sans-serif;
  font-size: 1rem;
  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: "Krona One", sans-serif;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  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: "Krona One", sans-serif;
  position: absolute;
  top: 20vh;
  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;
}

.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 ~11.4em wide in Krona One)
     fits the lead's content width on one line: the viewport minus the
     2rem side padding on small screens, 3.1rem once the 650px max width
     kicks in. */
  font-size: min(3.1rem, calc((100vw - 4rem) / 11.6));
  line-height: 1.15;
  margin: 0 0 1.5rem;
  color: var(--content);
  text-shadow: 0 0 14px rgba(0, 0, 0, 0.55);
}

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

.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(2.4rem, calc((100vw - 4rem) / 11.6));
    margin-bottom: 1rem;
  }
}

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

  .stats-display .hero-title {
    font-size: 1.6rem;
    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-weight: 900;
  background-color: transparent;
}

/* Larger primary button, e.g. the home hero CTA. */
.button a.large {
  font-size: 1.2rem;
  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: "Lato", sans-serif;
  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: "Lato", sans-serif;
  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%);
}