/* Reset & base */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --black: #000;
  --white: #fff;
  --gray-50: #111;
  --gray-100: #1a1a1a;
  --gray-200: #333;
  --gray-400: #888;
  --gray-600: #aaa;
  --gray-800: #ccc;
  --bg: #000;
  --fg: #fff;
  --radius: 0px;
  --max-width: 1040px;
  --transition: 0.15s ease;
}

html {
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--fg);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* Layout */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.container-narrow {
  max-width: 680px;
}

.main {
  flex: 1;
}

/* Nav */
.nav {
  border-bottom: 1px solid var(--gray-200);
  padding: 1.25rem 0;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  display: inline-flex;
  align-items: center;
}

.nav-logo:hover {
  text-decoration: none;
}

.nav-logo-img {
  height: 1.75rem;
  width: auto;
  display: block;
}

/* With an image logo the nav-inner cross-axis is driven by the taller
   image, not the text baseline, so the plain-text menu items used to
   drift upward relative to the logo. Giving every nav-inner child the
   same line-height locks the vertical rhythm regardless of which child
   is tallest. Mobile uses a stacked menu with its own padding, so this
   only applies above the mobile breakpoint. */
@media (min-width: 641px) {
  .nav-inner > * {
    line-height: 1.75rem;
  }
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2rem;
  align-items: center;
  margin: 0;
}

.nav-links li {
  margin: 0;
}

.nav-links a {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.nav-links a:hover {
  color: var(--fg);
}

.nav-links a.btn {
  color: var(--bg);
}

.nav-links a.btn:hover {
  color: var(--bg);
}

/* Hero */
.hero {
  padding: 7rem 0 5rem;
  text-align: center;
}

.hero h1 {
  font-size: 3.5rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.1;
  max-width: 720px;
  margin: 0 auto 1.5rem;
  text-transform: uppercase;
}

.hero-sub {
  font-size: 1.25rem;
  color: var(--gray-600);
  max-width: 520px;
  margin: 0 auto 2.5rem;
}

/* Sections */
.section {
  padding: 5rem 0;
}

.section h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.section h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
}

.lead {
  font-size: 1.2rem;
  color: var(--gray-600);
  margin-bottom: 2.5rem;
}

/* Prose (for rendered markdown on public pages) */
.prose {
  line-height: 1.8;
}

.prose h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: -0.02em;
}

.prose h2 {
  font-size: 1.75rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
}

.prose h3 {
  font-size: 1.35rem;
  font-weight: 700;
  margin: 2rem 0 0.75rem;
}

.prose p {
  margin-bottom: 1.25rem;
}

.prose ul,
.prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.prose a {
  text-decoration: underline;
}

ul {
  padding-left: 1.5rem;
  margin-bottom: 1rem;
}

li {
  margin-bottom: 0.5rem;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 2rem;
}

/* Cards */
.card {
  border: 2px solid var(--gray-200);
  padding: 2rem;
}

.card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.card p {
  color: var(--gray-600);
  font-size: 1rem;
}

/* Blog list */
.blog-list {
  margin-top: 1.5rem;
}

.blog-card {
  border-bottom: 1px solid var(--gray-200);
  padding: 2rem 0;
}

.blog-card:last-child {
  border-bottom: none;
}

.blog-card h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.blog-card h2 a {
  color: var(--fg);
}

.blog-card h2 a:hover {
  text-decoration: underline;
}

.post-meta {
  font-size: 0.9rem;
  color: var(--gray-400);
  margin-bottom: 0.75rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--gray-600);
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

.back-link:hover {
  color: var(--fg);
}

.post-content {
  margin-top: 2.5rem;
  line-height: 1.8;
}

.post-content h1,
.post-content h2,
.post-content h3 {
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}

.post-content p {
  margin-bottom: 1.25rem;
}

.post-content li {
  margin-bottom: 0.25rem;
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--fg);
  color: var(--bg);
  padding: 1rem 2rem;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: background var(--transition);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.btn:hover {
  background: var(--gray-800);
  color: var(--bg);
  text-decoration: none;
}

.btn-sm {
  padding: 0.5rem 1.25rem;
  font-size: 0.85rem;
}

/* Forms */
.form {
  margin-top: 2.5rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--fg);
  font-size: 1rem;
  font-family: inherit;
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--fg);
}

/* Form messages */
.form-message {
  padding: 1.25rem 1.5rem;
  font-size: 1rem;
  margin-bottom: 2rem;
}

.form-message-success {
  background: #052e16;
  border: 2px solid #166534;
  color: #4ade80;
}

.form-message-error {
  background: #450a0a;
  border: 2px solid #991b1b;
  color: #fca5a5;
}

/* Portfolio */
.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.portfolio-grid-item {
  list-style: none;
  /* Positioning context + clipping for the exit ribbon. The ribbon is
     an absolutely-positioned sibling of the tile; overflow:hidden keeps
     its diagonal tails clipped to the square. Non-exited tiles are
     unaffected because the ribbon is only rendered when .is-exited. */
  position: relative;
  overflow: hidden;
}

.portfolio-tile-ribbon {
  /* Diagonal corner ribbon. Positioned top-right of the tile and
     rotated 45deg so the text reads along the diagonal. The element
     is wider than the tile and offset so the ends visually disappear
     under the clipped corner.

     pointer-events:none is critical: the underlying <a>/<button> must
     still receive the click. aria-hidden in the template prevents the
     ribbon from being announced twice (the dialog title already
     carries the localised "(Exit)" suffix). */
  position: absolute;
  top: 1.25rem;
  right: -2.5rem;
  width: 10rem;
  padding: 0.25rem 0;
  transform: rotate(45deg);
  background: #b8860b; /* gold/amber - signals "milestone" against the neutral palette */
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  pointer-events: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  z-index: 1;
}

.portfolio-tile {
  /* Reset the default <a>/<button> chrome so the tile can be styled
     identically regardless of which element renders it. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1 / 1;
  padding: 1.5rem;
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  color: var(--fg);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  transition:
    border-color var(--transition),
    background var(--transition);
}

.portfolio-tile:hover,
.portfolio-tile:focus-visible {
  border-color: var(--gray-600);
  background: var(--gray-100);
}

.portfolio-tile:focus-visible {
  outline: 2px solid var(--fg);
  outline-offset: 2px;
}

.portfolio-tile-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  /* Every portfolio logo currently shipped is white-on-transparent.
     invert(0.5) pushes them to a neutral mid-grey by default and
     hover/focus removes the filter to restore full white. */
  filter: invert(0.5);
  opacity: 0.65;
  transition:
    filter 0.2s ease,
    opacity 0.2s ease;
}

.portfolio-tile:hover .portfolio-tile-logo,
.portfolio-tile:focus-visible .portfolio-tile-logo,
.portfolio-tile:focus-within .portfolio-tile-logo {
  filter: none;
  opacity: 1;
}

.portfolio-tile-fallback {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--gray-600);
  transition: color 0.2s ease;
}

.portfolio-tile:hover .portfolio-tile-fallback,
.portfolio-tile:focus-visible .portfolio-tile-fallback,
.portfolio-tile:focus-within .portfolio-tile-fallback {
  color: var(--fg);
}

/* Native <dialog> for the company detail popup. The element handles
   focus trap, Esc-to-close, and backdrop click for us; we only style
   it. */
.portfolio-dialog {
  width: min(32rem, calc(100% - 2rem));
  padding: 2.5rem 2rem 2rem;
  background: var(--gray-50);
  border: 2px solid var(--gray-200);
  color: var(--fg);
  /* Re-apply centering. The global `* { margin: 0 }` reset earlier in
     this stylesheet wipes out the user-agent `margin: auto` that
     centers <dialog> when opened with showModal(). The browser already
     positions a modal dialog absolutely against the viewport, so
     restoring auto margins on all four sides is enough to center it
     both horizontally and vertically. */
  margin: auto;
}

.portfolio-dialog::backdrop {
  background: rgb(0 0 0 / 0.7);
}

.portfolio-dialog-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2.25rem;
  height: 2.25rem;
  background: transparent;
  border: none;
  color: var(--gray-600);
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition);
}

.portfolio-dialog-close:hover,
.portfolio-dialog-close:focus-visible {
  color: var(--fg);
}

.portfolio-dialog-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 0.75rem 0;
  text-transform: uppercase;
}

.portfolio-dialog-description {
  font-size: 0.95rem;
  color: var(--gray-400);
  margin: 0 0 1.25rem 0;
  white-space: pre-line;
}

.portfolio-dialog-link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Ensure the [hidden] attribute keeps the link out of the layout. The
   custom display rule above would otherwise win the cascade against the
   user-agent `[hidden] { display: none }` rule. */
.portfolio-dialog-link[hidden] {
  display: none;
}

.portfolio-dialog-link:hover {
  text-decoration: underline;
}

/* Portfolio detail page */
.portfolio-detail {
  padding: 2rem 0;
}

.portfolio-detail-logo {
  margin-bottom: 1.5rem;
}

.portfolio-detail-logo-img {
  max-width: 200px;
  height: auto;
}

.portfolio-detail-exited {
  color: var(--accent);
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.portfolio-detail-description {
  font-size: 1.125rem;
  line-height: 1.7;
  margin-top: 1rem;
}

/* About page - goal section (just uses .section + .container-narrow) */
.about-goal {
  padding: 5rem 0 1rem;
}

.about-goal .lead {
  margin-top: 1.25rem;
}

/* About page - team section */
.about-team {
  padding: 1rem 0;
}

.about-team h2 {
  margin-bottom: 2.5rem;
}

.team-member {
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: center;
  gap: 2.5rem;
  margin-bottom: 3rem;
}

.team-member:last-child {
  margin-bottom: 0;
}

.team-member-photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--gray-100);
}

.team-member-body h3 {
  margin: 0 0 0.25rem;
}

.team-member-role {
  color: var(--gray-400);
  font-size: 0.95rem;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/*
  Alternate-sides variants. On the "right" variant we also flip the
  template columns so the *text* column stays wide (2fr) and the
  *photo* column stays narrow (1fr) regardless of which side the
  photo is on. Without this flip the photo would land in the wide
  column and blow up out of proportion to the text.
  Source order stays photo-first so screen readers still announce
  the member's photo before the caption.
*/
.team-member--right {
  grid-template-columns: 2fr 1fr;
}

.team-member--right .team-member-photo {
  grid-column: 2;
  grid-row: 1;
}

.team-member--right .team-member-body {
  grid-column: 1;
  grid-row: 1;
}

/* About page - fund details section */
.fund-details {
  padding: 1rem 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 0.5rem;
}

.fund-details-row {
  display: grid;
  grid-template-columns: minmax(10rem, 14rem) 1fr;
  gap: 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--gray-200);
}

.fund-details-row:last-child {
  border-bottom: 1px solid var(--gray-200);
}

.fund-details dt {
  color: var(--gray-400);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0;
}

.fund-details dd {
  margin: 0;
  font-weight: 500;
}

/*
  About page - full-width team photo banner. Sits under the fund
  details section. The image fills the container (max-width set by
  .container) with the site's standard padding, and uses the
  aspect-ratio box so layout is stable before the file downloads.
*/
.about-team-photo {
  padding-top: 0;
}

.about-team-photo-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  background: var(--gray-100);
}

/* Footer */
.footer {
  border-top: 1px solid var(--gray-200);
  padding: 2.5rem 0;
  color: var(--gray-400);
  font-size: 0.9rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.footer-inner p {
  margin: 0;
}

.footer-lang {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-lang a {
  color: var(--gray-400);
  text-decoration: none;
}

.footer-lang a:hover {
  color: var(--fg);
}

.footer-lang strong {
  color: var(--fg);
  font-weight: 600;
}

/* Mobile nav toggle (checkbox hack — zero JS) */
.nav-toggle {
  display: none;
}

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  width: 28px;
  height: 28px;
}

.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--fg);
  transition:
    transform var(--transition),
    opacity var(--transition);
}

/* Responsive */
@media (max-width: 640px) {
  .hero h1 {
    font-size: 2.25rem;
  }

  .hero-sub {
    font-size: 1.05rem;
  }

  .section {
    padding: 3rem 0;
  }

  /* Show burger, hide links by default */
  .nav-burger {
    display: flex;
  }

  .nav-inner {
    flex-wrap: wrap;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    width: 100%;
    gap: 0;
    padding-top: 1.25rem;
  }

  .nav-links li {
    border-top: 1px solid var(--gray-200);
  }

  .nav-links a {
    display: block;
    padding: 0.75rem 0;
  }

  .nav-links a.btn {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.25rem;
  }

  /* When checkbox is checked, show links */
  .nav-toggle:checked ~ .nav-links {
    display: flex;
  }

  /* Animate burger into X */
  .nav-toggle:checked ~ .nav-burger span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle:checked ~ .nav-burger span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked ~ .nav-burger span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* On narrow screens, stack the copyright and language switcher. */
  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  /*
    Team rows collapse to a single column; force the photo above the
    text regardless of the left/right variant so the layout stays
    consistent on mobile.
  */
  .team-member,
  .team-member--right {
    grid-template-columns: 1fr;
    gap: 1.25rem;
    margin-bottom: 2.5rem;
  }

  .team-member-photo,
  .team-member--right .team-member-photo {
    max-width: 280px;
    grid-column: 1;
    grid-row: 1;
  }

  .team-member-body,
  .team-member--right .team-member-body {
    grid-column: 1;
    grid-row: 2;
  }

  /* Fund details rows: stack label over value on mobile. */
  .fund-details-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
    padding: 0.75rem 0;
  }
}