/* Global background */
html {
  background-color: #fff !important;
  background-image: linear-gradient(to bottom, #fff 0%, #fff 95%, #0a0a0a 100%) !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
}
body { background-color: transparent !important; }
#main { background-color: #fff !important; }

/* Make page container fluid instead of fixed-width */
.framer-PSt8m[data-framer-root] {
  width: 100% !important;
  max-width: 100% !important;
}

/* Header layout: logo left, grouped tagline+nav on right */
header.framer-BFDbA.framer-1pi4kvb,
header.framer-BFDbA.framer-v-okhtss {
  align-items: center !important;
}
/* Flatten the original Framer group wrapper */
header.framer-BFDbA > .framer-1sqx35q {
  display: contents !important;
}
/* Right-side group: tagline + nav together, baseline-aligned, 8px gap */
header.framer-BFDbA .header-right-group {
  display: flex !important;
  align-items: baseline !important;
  gap: 8px !important;
  margin-left: auto !important;
}
/* Pre-JS fallback: push tagline right before groupHeaderRight() wraps it */
header.framer-BFDbA > .framer-1sqx35q > .framer-5tnxcy {
  margin-left: auto !important;
}
/* Tagline text block: vertical gap between lines */
header.framer-BFDbA .framer-5tnxcy {
  gap: 4px !important;
}
/* Hide email link from header nav */
#main header nav a[href="mailto:mfranshutt@gmail.com"] { display: none !important; }
/* Force-hide mobile header variant on non-mobile screens */
@media (min-width: 810px) {
  header.framer-BFDbA.framer-v-okhtss { display: none !important; }
}

/* Homepage grid: masonry column layout */
.framer-PSt8m .framer-1jmsdz9 {
  display: block !important;
  column-count: 5 !important;
  column-gap: 4px !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.framer-PSt8m .framer-wh52ic {
  break-inside: avoid !important;
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 4px !important;
  font-size: 14px !important;
  line-height: normal !important;
  vertical-align: top !important;
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-PSt8m .framer-1jmsdz9 {
    column-count: 4 !important;
  }
}
@media (max-width: 809.98px) {
  .framer-PSt8m .framer-1jmsdz9 {
    column-count: 2 !important;
  }
}

/* Homepage thumbnails: title overlaid inside image at bottom-left */
.framer-PSt8m .framer-wh52ic .framer-bvf7cn {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 1 !important;
  height: auto !important;
  overflow: visible !important;
  padding: 8px 10px !important;
  width: auto !important;
  align-items: flex-start !important;
}
.framer-PSt8m .framer-wh52ic .framer-bvf7cn .framer-text {
  color: #fff !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6) !important;
}

/* Project detail content overrides */
#main .framer-l2fhE main.framer-1djji3z { padding-top: 0 !important; padding: 0 0 20px !important; }
@media (max-width: 809.98px) { #main .framer-l2fhE main.framer-1djji3z { padding-top: 0 !important; padding: 0 0 20px !important; } }
#main .framer-1j6hxm3 { display: flex !important; align-items: flex-start !important; padding: 0 !important; height: 220px !important; }
#main .framer-1j6hxm3 > *:first-child { margin-top: 0 !important; padding-top: 0 !important; }
#main .framer-v1a3nu { height: fit-content !important; gap: 32px !important; }
#main .framer-l2fhE main.framer-1djji3z .framer-1j6hxm3 .framer-o56e9o { padding-left: 32px !important; }

/* Project detail text styling (Figma reference) */
#main .framer-l2fhE .framer-1wcqae5 .framer-text {
  --framer-font-size: 40px !important;
  --framer-line-height: normal !important;
  --framer-font-weight: 500 !important;
  --framer-text-color: #1f1f1f !important;
}
#main .framer-l2fhE .framer-198oxyn .framer-text {
  --framer-font-size: 16px !important;
  --framer-line-height: normal !important;
  --framer-font-weight: 500 !important;
  --framer-text-color: #9a9aa1 !important;
}
#main .framer-l2fhE .framer-klxaya .framer-text {
  --framer-font-size: 16px !important;
  --framer-line-height: normal !important;
  --framer-font-weight: 500 !important;
  --framer-text-color: #1f1f1f !important;
}
#main .framer-l2fhE main.framer-1djji3z .framer-16pvcfb { display: flex !important; flex-direction: column !important; align-items: flex-end !important; width: 100% !important; box-sizing: border-box !important; gap: 4px !important; }
#main .framer-l2fhE main.framer-1djji3z .framer-16pvcfb > * { width: fit-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: 0 !important; }
#main .framer-l2fhE main.framer-1djji3z .framer-16pvcfb img { max-width: 40vw !important; width: auto !important; height: auto !important; }
#main .framer-164h8x-container { display: none !important; }
#main .framer-crvuem { display: flex !important; width: 100% !important; position: relative !important; left: auto !important; }
#main .framer-crvuem .framer-1vv4pmy { display: block !important; }
#main .framer-crvuem .ssr-variant { display: contents !important; }

/* Show .framer-crvuem on all breakpoints (originally mobile-only) */
@media (min-width: 1200px) {
  .framer-crvuem.hidden-19f2ffq {
    display: flex !important;
    width: 100% !important;
    position: relative !important;
    left: auto !important;
  }
}
@media (min-width: 810px) and (max-width: 1199.98px) {
  .framer-crvuem.hidden-1he94hv {
    display: flex !important;
    width: 100% !important;
    position: relative !important;
    left: auto !important;
  }
}

/* Mobile: scale down project title for smaller screens */
@media (max-width: 809.98px) {
  #main .framer-l2fhE .framer-1wcqae5 .framer-text {
    --framer-font-size: 28px !important;
  }
}

/* Mobile: tagline moves below logo, full width */
@media (max-width: 809.98px) {
  header.framer-BFDbA.framer-1pi4kvb,
  header.framer-BFDbA.framer-v-okhtss {
    flex-wrap: wrap !important;
  }
  header.framer-BFDbA .header-right-group {
    display: contents !important;
  }
  header.framer-BFDbA .framer-5tnxcy {
    order: 10 !important;
    width: 100% !important;
    margin-left: 0 !important;
    flex-basis: 100% !important;
    margin-top: 12px !important;
  }
  header.framer-BFDbA .framer-1wwwl4y {
    margin-left: auto !important;
  }
}