/* ============================================================
   InCommon Capital — Project Stylesheet
   Brand: white on charcoal, arial/sans-serif, caps headers
   Mobile-first responsive
   ============================================================ */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 1rem); font-size: 16px; } /* clamp attributes set a minimum rem (multiple) of this, a view width scaling percentage vw, and a max rem */

body {
  font-family: arial, sans-serif;
  background: #f5f5f5;
  color: #424242;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.checkout-open {
  overflow: hidden;
}

/* ── CSS Variables ────────────────────────────────────────── */
:root {
  --white:    #ffffff;
  --gray:     #777777;
  --charcoal: #424242;
  --off-bg:   #f5f5f5;
  --border:   #e0e0e0;

  /* Secondary palette */
  --orange-earth:#ff9900;
  --green-forest:#669966;
  --blue-sky:    #6699ff;
  --red-candy:   #cc3333;
  --orange-sand: #ffcc33;
  --green-earth: #999933;
  --blue-royal:  #0066cc;
  --red-grape:   #cc6666;
  --purple:      #660099;
  --red-pink:    #ff9999;
  --red-magenta: #ff66cc;
  --green-vomit: #cccc00;
  --orange-yellow:#ffff66;
  --blue-navy:   #003399;
  --green-aqua:  #66cc99;
  --purple-grape:#666699;
  --red-orange:  #ff6600;
  --green-frog:  #66cc33;
  --blue-baby:   #ccccff;
  --red-wine:    #993333;
  --blue-violet: #6666cc;

  --nav-h: 56px;
  --max-w: 960px;
  --section-pad: 80px 24px;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

h1 { font-size: clamp(1.1rem, 3vw, 1.4rem); }
h2 { font-size: clamp(0.85rem, 2vw, 1rem); color: var(--gray); } /* clamp(0.85rem, 2vw, 1rem); margin-bottom: 2rem; */
h3 { font-size: clamp(0.8rem, 1.8vw, 0.9rem); color: var(--gray); }
h2 img {
  height: 20px;
  width: auto;
  display: inline-block;
}


p { margin-bottom: 1.2em; max-width: 100%; } /* max-width: 680px;*/ 
p:last-child { margin-bottom: 0; }

.note {font-size: 80%;}
sup {
  font-size: 0.75em;
  line-height: 0;
}

sup a {
  text-decoration: none;
}

sup a:hover,
sup a:focus-visible {
  text-decoration: underline;
}

em {
  font-style: normal;
  font-weight: bold;
  color: var(--orange-earth);
}

a {
  color: var(--blue-sky);
  text-decoration: underline;
}
a:visited { opacity: 0.75; text-decoration: none; color: var(--gray);}
a:hover, a:focus-visible { text-decoration: underline; color: var(--orange-earth);}

a.button-link {
  display: inline-block;
  padding: 0.6rem 1rem;
  border: 1px solid var(--orange-earth);
  border-radius: 999px;
  color: var(--orange-earth);
  background: transparent;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

a.button-link:visited { 
  border-color: var(--gray);
  color: var(--gray);
}

a.button-link:hover,
a.button-link:focus-visible {
  border-color: var(--orange-earth);
  color: var(--orange-earth);
  background: rgba(255,153,0,0.1);
  text-decoration: none;
/*  box-shadow: 0 0 0 2px rgba(102, 153, 102, 0.12);*/
}

a.inbutton, a.inbutton:link, button.inbutton {
  display: inline-flex;
  padding: 0.1rem 0.6rem;
  border: 1px solid var(--orange-earth);
  border-radius: 99px;
  color: var(--orange-earth);
  background: transparent;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
  font-size: inherit; 
  line-height: 1.2;
  height: auto;
  cursor: pointer;
}

a.inbutton:hover, a.inbutton:focus-visible,
button.inbutton:hover, button.inbutton:focus-visible {
  border-color: var(--orange-earth);
  color: var(--orange-earth);
  background: rgba(255,153,0,0.1);
  text-decoration: none;
}

a.inbutton:visited, button.inbutton:visited { 
  border-color: var(--gray);
  color: var(--gray);
}

input[type="email"] {
  border-radius: 4px;
  border: 1px solid var(--gray);
  padding: 0.1rem 0.6rem;
  font-family: inherit;
  font-size: 1rem;
  box-sizing: border-box; /* Keeps the padding from making the box wider */
}

/* Optional: Add a subtle focus effect when someone clicks into the box */
input[type="email"]:focus {
  outline: none;
  border-color: var(--orange-earth);
  box-shadow: 0 0 0 2px rgba(255, 153, 0, 0.2);
}

ul { padding-left: 1.4em; }
ul li { margin-bottom: 0.6em; }

blockquote {
  border-left: 3px solid var(--orange-earth);
  padding: 1rem 1.5rem;
  margin: 2rem 0;
  color: var(--gray);
  font-style: italic;
  font-size: 0.95rem;
  max-width: 640px;
}

.bullet-list {
  max-width: 680px; 
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 1.5rem 0;
}

.bullet-list li {
  padding: 0 0 0 1.5rem; /* top, right, bottom, left */
  position: relative;
  font-size: 0.95rem;
}

.bullet-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--orange-earth);
  font-weight: 700;
}

.accordion-list {
  display: grid;
  gap: 0.75rem;
}

.accordion-item {
  padding: 0 0 0 1.5rem;
}

.accordion-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  line-height: 1.6;
  text-decoration: underline;
}

.accordion-trigger:hover,
.accordion-trigger:focus-visible {
  color: var(--orange-earth);
  outline: none;
}

.accordion-panel {
  margin-top: 0.65rem;
  padding: 0.75rem 0 0 0.75rem;
  border-left: 2px solid rgba(42, 42, 42, 0.12);
}

.accordion-panel p {
  margin: 0 0 0.55rem;
  color: rgba(42, 42, 42, 0.8);
  line-height: 1.6;
}

.accordion-panel a {
  color: var(--gray);
  /*font-weight: 600;*/
  text-decoration: underline;
}

.accordion-panel a:hover {
  color: var(--orange-earth);
  text-decoration: underline;
}

.accordion-item.open .accordion-trigger {
  color: var(--orange-earth);
  font-weight: 700;
}

/* Secondary bullet list used inside accordion panels */
.secondary-bullet-list {
  margin: 0.5rem 0 0 1rem;
  padding-left: 1rem;
  list-style: disc;
}
.secondary-bullet-list li {
  margin: 0.25rem 0;
}

/* Remove inherited em-dash pseudo-element from parent `.bullet-list li::before` */
.secondary-bullet-list li::before {
  content: none !important;
}

/* Ensure the native list marker is orange */
.secondary-bullet-list li::marker {
  color: var(--orange-earth);
  font-weight: 700;
}

/* ── Layout Container ─────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

.section {
  padding: var(--section-pad);
}

.section + .section {
  border-top: 1px solid var(--border);
}

/* ── Project Title Bar ───────────────────────────────────── */
.project-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: var(--charcoal);
  z-index: 1000;
  display: flex;
  align-items: center;
}

.project-nav .container {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.project-title {
  color: var(--white);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 0.8;  /* has some pixels cut off at top at 0.7 */
}

.project-title a {
  font-size: 0.6rem;
  text-transform: uppercase;
}


/* ── Section Labels ───────────────────────────────────────── */
.section-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--orange-earth);
  margin-bottom: 1rem;
  display: block;
  height: 1.2rem;
}

.section-label img {
  height: 18px;
  width: auto;
  display: inline;
}

/* ── Hero Section ──────────────────────────────────── */
.section-hero {
  position: relative;
  height: 100vh;
  min-height: 100vh;
  background: var(--white) url('img/women.jpg') left center/cover no-repeat;
  color: var(--charcoal);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding-top: var(--nav-h);
  padding-bottom: 10vh;
  overflow: hidden;
}

#hero.is-checkout {
  overflow: hidden;
}

#hero.is-checkout .container {
  display: none;
}

@media (min-width: 521px) {
  .section-hero {
    background-image: url('img/women.jpg');
    background-position: left center;
  }
}

.section-hero .container {
  width: min(42%, 420px);
  margin-left: auto;
  margin-right: 8%;
  max-width: 420px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
  padding: 40px 24px 20px;
  border-radius: 12px;
}

.checkout-card {
  position: fixed;
  left: 50%;
  top: calc(var(--nav-h) + 8px);
  bottom: 8px;
  transform: translateX(-50%);
  width: min(90vw, 980px);
  max-width: 980px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(66, 66, 66, 0.12);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(42, 42, 42, 0.18);
  backdrop-filter: blur(2px);
  overflow: hidden;
  z-index: 1001;
}

.checkout-card-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.close-checkout-card {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(42, 42, 42, 0.7);
  color: transparent;
  font-size: 0;
  line-height: 0;
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 5;
  aspect-ratio: 1;
}

.close-checkout-card::before,
.close-checkout-card::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  transform-origin: center;
}

.close-checkout-card::before {
  transform: rotate(45deg);
}

.close-checkout-card::after {
  transform: rotate(-45deg);
}

.close-checkout-card:hover,
.close-checkout-card:focus-visible {
  background: rgba(42, 42, 42, 0.9);
  outline: none;
}

.checkout-iframe-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  background: #fff;
  padding-top: 42px;
}

.checkout-card iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  border: 0;
  background: #fff;
}

.checkout-disclaimer {
  flex: 0 0 auto;
  margin: 0;
  padding: 14px 14px 12px;
  font-size: 0.62rem;
  line-height: 1.45;
  color: #fff;
  background: rgba(42, 42, 42, 0.92);
}

.section-hero .container .section-label,
.section-hero .container h2,
.section-hero .container p,
.section-hero .container em {
  color: var(--charcoal);
}

.section-hero .container p {
  max-width: none;
}

.funds-card {
  display: inline-block;
  width: min(100%, 340px);
  background: rgba(255, 255, 255, 0.78);
  /*border: 1px solid rgba(66, 66, 66, 0.14);
  box-shadow: 0 10px 25px rgba(42, 42, 42, 0.08);*/
  border-radius: 12px;
  padding: 0.9rem 0.9rem 0.6rem;
  margin: 1rem 0 1.25rem;
}

.funds-progress-bg {
  background-color: var(--white);
  border-radius: 9999px;
  height: 12px;
  overflow: hidden;
  margin-bottom: 5px;
}

#funds-progress-bar {
  background-color: var(--blue-sky);
  height: 100%;
  transition: width 0.5s ease-out;
}

#funds-percent-text {
  font-size: 14px;
  color: #4a5568;
  margin: 0;
  text-align: right;
}

/* ── Campaign Section ───────────────────────────────────────── */
.section-campaign {
  color: var(--charcoal);
  padding: var(--section-pad);
  padding-top: calc(var(--nav-h) + 0px);/* + 60px */
}

.section-campaign .container h2 {
  color: var(--charcoal);
}

.section-campaign em, .section-campaign .section-label {
  color: var(--orange-earth);
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 0.25rem;
  margin: 2rem 0;
}

.process-block {
  min-width: 0;
  min-height: 5rem;
  padding: 0.75rem;
  border: 1px solid var(--border);
  background: var(--white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.1rem;
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
}

.process-emissions { white-space: nowrap; font-size: 0.78rem; font-weight: normal; }

.process-title { grid-column: span 6; background: none; border: none; min-height:auto; }
.process-decomposition { background: var(--green-aqua); }
.process-production { background: var(--red-orange); }
.process-cooking { background: var(--red-pink); }
.process-harvest { background: var(--red-grape); }
.process-product { background: none; border: none; font-size: 0.85rem; font-weight: 700; }
/*.process-offset { grid-column: span 3; background: var(--green-aqua); min-height: 3rem; }
.process-external { grid-column: span 3; background: var(--red-grape); color: var(--white); min-height: 3rem; }*/
.process-charcoal { grid-column: span 3; background: var(--charcoal); color: var(--white); min-height: 3rem; }
.process-landscape { grid-column: span 3; background: var(--green-forest); color: var(--white); }
.process-image { display: block; width: 100%; height: auto; }
.process-image-block { padding: 0; border: 0; background: none; gap: 0; }

@media (min-width: 521px) {
  .process-product { grid-column: span 3; }
  .process-charcoal:nth-child(10) { grid-column: 1 / span 3; }
  .process-charcoal:nth-child(11) { grid-column: 4 / span 3; }
  .process-landscape:nth-child(12) { grid-column: 1 / span 6; }
  /*.process-offset:nth-child(10) { grid-column: 1 / span 3; }
  .process-external:nth-child(11) { grid-column: 4 / span 3; }
  .process-charcoal:nth-child(12) { grid-column: 1 / span 3; }
  .process-charcoal:nth-child(13) { grid-column: 4 / span 3; }
  .process-landscape:nth-child(14) { grid-column: 1 / span 6; }*/
}

@media (max-width: 520px) {
  .process-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .process-block {
    grid-column: span 3;
  }
  .process-title { grid-column: span 6; }
  .process-cooking { order: 1; }
  .process-production { order: 2; }
  .process-decomposition,
  /*.process-harvest { order: 3; }
  .process-offset { order: 4; }
  .process-external { order: 5; }
  .process-charcoal { order: 6; }
  .process-landscape { order: 7; }
  .process-landscape:nth-child(14) { grid-column: 1 / span 6; }*/
  .process-harvest { order: 3; }
  .process-charcoal { order: 4; }
  .process-landscape { order: 5; }
  .process-landscape:nth-child(12) { grid-column: 1 / span 6; }

  .section-hero {
    display: block;
    padding-bottom: 0;
  }

  .section-hero .container {
    width: min(90vw, 420px);
    margin: 0 auto;
    margin-top: calc(var(--nav-h) + 1.5rem);
    margin-right: auto;
    margin-left: auto;
  }

  .checkout-card {
    width: 92vw;
  }
}

.story-photo-inline {
  float: left;
  width: min(50%, 300px);
  margin: 0 1.25rem 0.75rem 0;
}

.story-photo-inline img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 10px 20px rgba(32, 32, 32, 0.08);
}

.story-photo-inline figcaption,
.image-slide figcaption {
  margin-top: 0.45rem;
  font-size: 0.72rem;
  color: var(--gray);
  line-height: 1.4;
}

.image-carousel {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.5rem 0 1rem;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.image-slide {
  flex: 0 0 220px;
}

.image-carousel img {
  flex: 0 0 220px;
  width: 220px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
  scroll-snap-align: start;
  box-shadow: 0 10px 20px rgba(32, 32, 32, 0.08);
}

/* ── Progress Section ───────────────────────────────────── */
.section-progress {
  background: var(--white);
  color: var(--charcoal);
  padding: var(--section-pad);
  padding-top: calc(var(--nav-h) + 60px);
}

.section-progress h2 {
  color: var(--charcoal);
}

.section-progress .section-label {
  color: var(--orange-earth);
}

.section-about {
  padding-top: 36px;
}

.section-interest .container h2 {
  padding-top: 20px;
  color: var(--charcoal);
}

.section-interest p {
   margin-bottom: 0.6rem;
}

.info-list {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
  gap: 2rem;
  align-items: start;
  margin-top: 1.5rem;
}

.info-block {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  min-width: 0;
}

.update-list,
.donor-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.update-item {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}

.update-item h4 {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.update-item h4 a {
  color: var(--charcoal);
  text-decoration: none;
}

.update-item h4 a:hover,
.update-item h4 a:focus-visible {
  color: var(--orange-earth);
  text-decoration: underline;
}

.update-item p {
  margin: 0;
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.6;
}

.update-list, .donor-list {
  font-size: 0.82rem;
}

.donor-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.donor-list img {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
  border: 1px solid rgba(66, 66, 66, 0.12);
}

.donor-copy {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.85rem;
}

.donor-copy strong {
  color: var(--charcoal);
}

.donor-copy span {
  color: var(--gray);
}

/* ── About section ───────────────────────────────────────────── */
.about-grid {
  display: block;
}

.about-person {
  border-top: 1px solid var(--border);
  padding:  1.5rem 0;
  /*line-height: 1.2;*/
  font-size: 0.9rem;
  width: 85%;
  display: flow-root;
}

.about-person::after {
  content: '';
  display: table;
  clear: both;
}

.about-photo {
  float: left;
  width: 100%;
  max-width: 160px;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
  display: block;
  margin: 0 1.5rem 0.75rem 0;
}

.about-bio {
  overflow: visible;
}

.about-copy {
  max-width: none;
  width: auto;
}

.about-bio h3 {
  font-size: 1.3rem;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--charcoal);
  margin-bottom: 0.25rem;
}

.about-bio .role {
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange-earth);
  margin-bottom: 1.5rem;
  display: block;
}

/* ── Sponsor Section ─────────────────────────────────────────── */
.section-sponsor {
  background: var(--charcoal);
  color: var(--white);
  padding: var(--section-pad);
  padding-top: calc(var(--nav-h) + 60px);
}

.section-sponsor h2 { color: rgba(255,255,255,0.5); }
.section-sponsor p { color: rgba(255,255,255,0.8); }

.section-sponsor .footnote {
  padding-left: 1.25rem;
  font-size: 0.85rem;
  line-height: 1.55;
}

.section-sponsor .footnote span[id^="note-"] {
  display: inline-block;
  width: 1.25rem;
  margin-left: -1.25rem;
  color: var(--orange-earth);
  font-weight: 700;
}


/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  :root { --section-pad: 60px 0px; }
  .about-photo { max-width: 140px; margin: 0 1rem 1rem 0; }
}

@media (max-width: 520px) {
  .story-photo-inline {
    float: none;
    width: 100%;
    margin: 0 0 1rem;
  }

  .section-hero {
    min-height: auto;
    display: block;
    padding-top: calc(var(--nav-h) + 80px);
    padding-bottom: 10px;
  }

  .section-hero .container {
    width: calc(70% - 20px);
    margin: 0 8% 0 auto;
    max-width: none;
    padding: 22px 18px 18px;
  }

  .section-label {
    line-height: 1.5;
    height: auto;
  }

  .section-hero .container h2,
  .section-hero .container .section-label,
  .section-hero .container p {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  .about-photo {
    float: none;
    display: block;
    max-width: 120px;
    margin: 0 0 1rem;
  }
}