
/* v53 — Responsive chalkboard About section.
   Uses the supplied blackboard image as design reference, but renders all copy as real responsive text. */

.page--home .section--chalkAbout{
  position: relative;
  padding-top: clamp(54px, 7vw, 96px) !important;
  padding-bottom: clamp(42px, 6vw, 80px) !important;
}

.page--home .chalkboardAbout{
  position: relative;
  max-width: 1320px;
  margin: 0 auto;
  padding: clamp(10px, 1.25vw, 18px);
  border-radius: 8px;
  background:
    linear-gradient(135deg, #8f552b 0%, #c08142 16%, #5f351d 33%, #b9763a 52%, #4a2818 72%, #a96a35 100%);
  box-shadow:
    0 34px 80px rgba(0,0,0,.46),
    0 3px 0 rgba(255,255,255,.06) inset,
    0 0 0 1px rgba(255,220,160,.16);
}

.page--home .chalkboardAbout::before{
  content:"";
  position:absolute;
  inset: clamp(5px, .7vw, 10px);
  border-radius: 5px;
  pointer-events:none;
  box-shadow:
    inset 0 0 0 1px rgba(255,245,210,.11),
    inset 0 0 28px rgba(0,0,0,.38);
}

.page--home .chalkboardSurface{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  padding: clamp(28px, 4vw, 56px) clamp(24px, 4.6vw, 72px) clamp(30px, 4.4vw, 60px);
  color: rgba(247,247,239,.94);
  background:
    radial-gradient(circle at 24% 18%, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(circle at 68% 52%, rgba(255,255,255,.035), transparent 34%),
    linear-gradient(180deg, #171817 0%, #0e100f 100%);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    inset 0 0 48px rgba(0,0,0,.74),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* chalk grain */
.page--home .chalkboardSurface::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.19;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.023) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
}

.page--home .chalkboardSurface::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.16;
  background:
    radial-gradient(circle at 12% 70%, rgba(255,255,255,.18), transparent 8%),
    radial-gradient(circle at 83% 22%, rgba(255,255,255,.13), transparent 10%),
    radial-gradient(circle at 52% 88%, rgba(255,255,255,.10), transparent 9%);
  filter: blur(12px);
}

.page--home .chalkTitle,
.page--home .chalkBlock,
.page--home .chalkColumn,
.page--home .chalkDivider{
  position: relative;
  z-index: 1;
}

.page--home .chalkTitle{
  margin: 0 auto clamp(22px, 3vw, 40px);
  width: max-content;
  max-width: 100%;
  color: rgba(255,255,248,.92);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Marker Felt", cursive;
  font-size: clamp(46px, 6vw, 94px);
  line-height: .92;
  font-weight: 700;
  letter-spacing: -.04em;
  text-align: center;
  text-shadow:
    0 0 1px rgba(255,255,255,.8),
    0 2px 10px rgba(255,255,255,.12);
}

.page--home .chalkTitle::after,
.page--home .chalkBlock h3::after,
.page--home .chalkColumn--right h3::after{
  content:"";
  display:block;
  height: clamp(3px, .45vw, 6px);
  margin-top: 4px;
  border-radius: 999px;
  background: rgba(255,255,245,.78);
  filter: blur(.35px);
  transform: rotate(-1deg);
  box-shadow: 0 0 6px rgba(255,255,255,.12);
}

.page--home .chalkColumns{
  position: relative;
  z-index:1;
  display:grid;
  grid-template-columns: minmax(0, 1.05fr) 2px minmax(0, 1fr);
  gap: clamp(26px, 4vw, 54px);
  align-items: stretch;
}

.page--home .chalkDivider{
  width: 2px;
  min-height: 100%;
  background: rgba(255,255,245,.60);
  opacity:.8;
  filter: blur(.2px);
  transform: rotate(.2deg);
}

.page--home .chalkBlock + .chalkBlock{
  margin-top: clamp(24px, 4vw, 48px);
}

.page--home .chalkBlock h3,
.page--home .chalkColumn--right h3{
  width: max-content;
  max-width: 100%;
  margin: 0 0 clamp(14px, 1.8vw, 22px);
  color: rgba(255,255,248,.93);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Marker Felt", cursive;
  font-size: clamp(30px, 3.6vw, 62px);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.04em;
  text-shadow:
    0 0 1px rgba(255,255,255,.75),
    0 2px 9px rgba(255,255,255,.10);
}

.page--home .chalkBlock h3::after,
.page--home .chalkColumn--right h3::after{
  height: clamp(2px, .35vw, 4px);
  margin-top: 3px;
}

.page--home .chalkBlock p,
.page--home .chalkList li{
  color: rgba(252,252,243,.90);
  font-family: "Segoe Print", "Bradley Hand", "Comic Sans MS", "Marker Felt", cursive;
  font-size: clamp(17px, 1.55vw, 27px);
  line-height: 1.35;
  letter-spacing: -.025em;
  text-shadow:
    0 0 1px rgba(255,255,255,.70),
    0 1px 8px rgba(255,255,255,.06);
}

.page--home .chalkBlock p{
  max-width: 42ch;
  margin: 0 0 clamp(12px, 1.4vw, 18px);
}

.page--home .chalkBlock p:last-child{
  margin-bottom: 0;
}

.page--home .chalkBlock strong{
  font-weight: 800;
  color: rgba(255,255,248,.96);
}

.page--home .chalkLink{
  color: rgba(255,255,248,.96) !important;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: .14em;
  text-decoration-color: rgba(255,255,245,.60);
}

.page--home .chalkList{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap: clamp(18px, 2.4vw, 30px);
}

.page--home .chalkList li{
  position:relative;
  padding-left: 1.2em;
}

.page--home .chalkList li::before{
  content:"•";
  position:absolute;
  left:0;
  top:0;
  color:rgba(255,255,248,.90);
  font-size:1.15em;
  line-height:1.1;
}

.page--home .section--chalkAbout .aboutPartnersShowcase{
  margin-top: clamp(34px, 5vw, 70px) !important;
}

/* Desktop readability guard: avoid over-large chalk paragraphs on very wide screens. */
@media (min-width: 1300px){
  .page--home .chalkBlock p,
  .page--home .chalkList li{
    font-size: 24px;
  }
}

/* Tablet: preserve board feeling but stack columns before text becomes cramped. */
@media (max-width: 980px){
  .page--home .chalkColumns{
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .page--home .chalkDivider{
    width: 100%;
    height: 2px;
    min-height: 2px;
  }

  .page--home .chalkBlock p,
  .page--home .chalkList li{
    max-width: none;
    font-size: clamp(17px, 2.2vw, 22px);
  }
}

/* Mobile: convert the board into readable stacked chalk notes. */
@media (max-width: 700px){
  .page--home .section--chalkAbout{
    padding-top: 44px !important;
    padding-bottom: 34px !important;
  }

  .page--home .chalkboardAbout{
    padding: 8px;
    border-radius: 7px;
  }

  .page--home .chalkboardSurface{
    padding: 24px 18px 26px;
  }

  .page--home .chalkTitle{
    font-size: clamp(38px, 13vw, 54px);
    margin-bottom: 24px;
  }

  .page--home .chalkBlock h3,
  .page--home .chalkColumn--right h3{
    font-size: clamp(28px, 10vw, 42px);
    margin-bottom: 12px;
  }

  .page--home .chalkBlock p,
  .page--home .chalkList li{
    font-size: clamp(16px, 5.05vw, 20px);
    line-height: 1.42;
  }

  .page--home .chalkBlock + .chalkBlock{
    margin-top: 26px;
  }

  .page--home .chalkList{
    gap: 17px;
  }

  .page--home .section--chalkAbout .aboutPartnersShowcase{
    margin-top: 30px !important;
  }
}

/* Small phones: keep readable, not tiny. */
@media (max-width: 390px){
  .page--home .chalkboardSurface{
    padding: 22px 15px 24px;
  }

  .page--home .chalkBlock p,
  .page--home .chalkList li{
    font-size: 15.6px;
  }
}
