:root {
  color-scheme: dark;
  --background: #111111;
  --text: #e6dcd6;
  --muted: rgb(230 220 214 / .68);
  --line: #303030;
  --brand-font: 'Chakra Petch', Arial, sans-serif;
  --content-width: 550px;
  --page-gutter: 1.25rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; background: var(--background); }

body {
  margin: 0;
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  background: var(--background);
  color: var(--text);
  font-family: 'Barlow', Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-underline-offset: .18em; }

.about-layout {
  width: min(var(--content-width), calc(100% - var(--page-gutter) - var(--page-gutter)));
  margin-inline: auto;
}

.about-header {
  padding-top: clamp(1.5rem, 3.5vw, 3.25rem);
  animation: about-appear .75s ease .12s both;
}

.about-brand {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--brand-font);
  font-size: .85rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-decoration: none;
}

.about-brand img { display: block; width: 34px; height: 34px; margin-left: -8px; object-fit: contain; }

.about-brand:hover, .about-footer a:hover { color: var(--muted); }

.about-main { margin-top: clamp(6rem, 12vw, 10.5rem); }

.about-section {
  max-width: 1200px;
  margin: 0 0 clamp(5rem, 9vw, 8rem);
  scroll-margin-top: 3rem;
}

.about-section h1,
.about-section h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--brand-font);
  font-weight: 400;
  letter-spacing: .015em;
}

.about-section h1 {
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: 1;
  animation: about-rise .9s cubic-bezier(.16, 1, .3, 1) .25s both;
}

.about-section h2 {
  margin-bottom: 1.8rem;
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  line-height: 1.1;
}

.about-section p,
.about-section li {
  max-width: 1150px;
  color: var(--muted);
  font-size: clamp(1.35rem, 2.1vw, 1.85rem);
  font-weight: 300;
  line-height: 1.65;
  letter-spacing: -.018em;
}

.about-section p { margin: 0 0 1.2rem; }

.about-intro p { animation: about-rise .85s cubic-bezier(.16, 1, .3, 1) both; }
.about-intro p:nth-of-type(1) { animation-delay: .42s; }
.about-intro p:nth-of-type(2) { animation-delay: .58s; }
.about-intro p:nth-of-type(3) { animation-delay: .74s; }

.about-section ul { list-style: none; max-width: 1100px; margin: 0; padding: 0; }
.about-section li { padding: .8rem 0; border-top: 1px solid var(--line); }
.about-section li:last-child { border-bottom: 1px solid var(--line); }

.supporter-logos {
  display: grid;
  grid-template-columns: minmax(0, .65fr) minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, .65fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(.4rem, 1vw, 1.25rem);
  padding-top: 2rem;
}

.supporter-logos img {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 140px;
  max-height: 55px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .7;
}

.supporter-logos .supporter-tt,
.supporter-logos .supporter-17tech { max-width: 52px; }

.about-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--line);
}

.about-footer a {
  color: var(--muted);
  font-family: var(--brand-font);
  font-size: .8rem;
  text-decoration: none;
}

@keyframes about-appear {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes about-rise {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

:focus-visible { outline: 2px solid var(--text); outline-offset: 5px; }

@media (max-width: 700px) {
  .about-main { margin-top: 5rem; }
  .about-section { margin-bottom: 4.5rem; }
  .about-section p, .about-section li { font-size: 1.2rem; line-height: 1.55; }
  .about-section h1 { font-size: clamp(2.2rem, 8vw, 3.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .about-header, .about-section h1, .about-intro p { animation: none; }
}