/* Now-building index (/ai) — Variant A main only.
 * Header + footer come from the shared Squarespace shell (site.css / site-chrome.css).
 * Desktop: same 24-col fluid-engine as the homepage. Content sits in columns
 * 2–19 (the bio band); columns 20–25 stay empty — that right-side gap.
 * Mobile: 8-col engine; content uses all 8 content columns (homepage bio too).
 */

/*
 * Shared shell on /ai (header + footer): keep title/content/footer on one
 * left rail. Cache-busting query on the <link> forces this sheet past CDNs.
 */
body.header-width-inset .header-announcement-bar-wrapper > .header-inner,
body.header-width-inset .header-inner {
  margin: 0 auto 0 0 !important;
}

@media (max-width: 767px) {
  body footer .fluid-engine,
  body .now-building-main {
    grid-template-columns:
      var(--grid-gutter)
      repeat(8, minmax(0, var(--cell-max-width)))
      minmax(0, 1fr) !important;
  }
}

@media (min-width: 768px) {
  body footer .fluid-engine,
  body .now-building-main {
    grid-template-columns:
      var(--grid-gutter)
      repeat(24, minmax(0, var(--cell-max-width)))
      minmax(0, 1fr) !important;
  }
}

.now-building-main {
  --now-building-muted: #767676;
  --now-building-rule: rgba(255, 255, 255, 0.22);
  --now-building-accent: #e63946;
  --row-height-scaling-factor: 0.0215;
  --grid-gutter: var(--sqs-site-gutter, var(--pagePadding, 3vw));
  --site-max: var(--sqs-site-max-width, var(--maxPageWidth, 1900px));
  --cell-max-width: calc(var(--site-max) / 24);
  --container-width: min(
    var(--site-max),
    calc(100vw - var(--grid-gutter) * 2)
  );
  --fluid-row: calc(var(--container-width) * var(--row-height-scaling-factor));
  box-sizing: border-box;
  font-family: var(--body-font-font-family, aktiv-grotesk);
  color: #fff;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* Fixed left gutter; spare width on the right (match homepage site-chrome). */
  grid-template-columns:
    var(--grid-gutter)
    repeat(24, minmax(0, var(--cell-max-width)))
    minmax(0, 1fr);
}

/* Homepage bio: grid-area 5/2/17/20 → content columns 1–18 of 24. */
.now-building-main > * {
  grid-column: 2 / 20;
}

.now-building-intro-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Homepage: avatar rows 1–3, bio row 5 → one empty fluid row between */
  gap: var(--fluid-row);
  /* Tight to intro (sibling below); section gap lives on .now-building-intro */
  margin-bottom: 0.75rem;
}

/* No intro: keep a full section gap before the card grid */
.now-building-intro-block:not(:has(+ .now-building-intro)) {
  margin-bottom: calc(var(--fluid-row) * 2);
}

.now-building-portrait {
  position: relative;
  width: calc(var(--fluid-row) * 3);
  height: calc(var(--fluid-row) * 3);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--now-building-accent);
}

.now-building-portrait img:not([data-pixel-shades]) {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Pixel shades: out of flow so the fixed square slot does not double height. */
.now-building-portrait[data-profile-photo-slot] img[data-pixel-shades] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  display: block;
  pointer-events: none;
  visibility: hidden;
  z-index: 2;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.now-building-portrait[data-profile-photo-slot].is-live:hover img[data-pixel-shades] {
  visibility: visible;
}

@media (max-width: 767px) {
  .now-building-main {
    --fluid-row: 24px;
    --grid-gutter: var(--sqs-mobile-site-gutter, 6vw);
    --cell-max-width: calc(var(--site-max) / 8);
    grid-template-columns:
      var(--grid-gutter)
      repeat(8, minmax(0, var(--cell-max-width)))
      minmax(0, 1fr);
  }

  .now-building-main > * {
    grid-column: 2 / 10;
  }

  .now-building-portrait {
    width: 72px;
    height: 72px;
  }
}

.now-building-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  font-family: var(--heading-font-font-family, aktiv-grotesk);
  font-size: inherit;
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.15;
}

.now-building-title-lead {
  font-family: var(--body-font-font-family, aktiv-grotesk);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--now-building-muted);
  line-height: 1.3;
}

.now-building-title-main {
  font-family: var(--heading-font-font-family, aktiv-grotesk);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.2;
}

.now-building-intro {
  margin: 0 0 calc(var(--fluid-row) * 2.5);
  max-width: 40rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--now-building-muted);
}

.now-building-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  align-items: start;
}

@media (max-width: 767px) {
  .now-building-grid {
    grid-template-columns: 1fr;
  }
}

.now-building-card {
  border: 1px solid var(--now-building-rule);
  padding: 1.35rem 1.4rem 1.5rem;
  /* Do not use min-height:100% — it stretches with section/viewport on resize */
  height: fit-content;
  align-self: start;
}

.now-building-card-title {
  margin: 0 0 0.65rem;
  font-family: var(--heading-font-font-family, aktiv-grotesk);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.25;
  color: #fff;
}

.now-building-card-p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--now-building-muted);
}

.now-building-card-p a {
  color: #fff;
}

.now-building-card-p a:hover,
.now-building-card-p a:focus-visible {
  color: var(--site-link-hover, #e63946);
}

.now-building-cta {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--body-font-font-family, aktiv-grotesk);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.55;
  color: #fff;
  text-decoration: none;
}

.now-building-cta:hover,
.now-building-cta:focus-visible {
  color: var(--site-link-hover, #e63946);
}

.now-building-cta span {
  font: inherit;
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.28em;
  text-decoration-skip-ink: none;
}