/* story section (Figma 22:1327) */
#sec-story {
  position: relative;
  width: 1728px;
  height: 920px;
  background: #e8ecd4;
  overflow: hidden;
  display: flex;
  gap: 40px;
  align-items: flex-start;
  padding: 100px 200px;
  box-sizing: border-box;
  --story-bball-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='433.5' height='602.8' viewBox='0 0 433.5 602.8'><path d='M420.5 596.5C341.7 605.3 116.5 604 32 598L0 0H433.5L420.5 596.5Z' fill='white'/></svg>");
}

/* ---- Left text column ---- */
#sec-story .story-text {
  flex: 1 0 0;
  min-width: 1px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
}
#sec-story .story-h {
  margin: 0;
  /* LoRes 9 pixel display font in the source; falls back to bold monospace */
  font-family: "LoRes 9 OT", "LoRes 9 Plus OT", "Courier New", monospace;
  font-weight: 700;
  font-size: 80px;
  line-height: 1;
  color: #fff;
  text-shadow: -4px 4px 0 #0051c6;
  white-space: pre;
}
#sec-story .story-p1 {
  margin: 0;
  /* OCR A Std in the source; falls back to monospace */
  font-family: "OCR A Std", "Share Tech Mono", monospace;
  font-size: 26px;
  line-height: 1.4;
  color: #0051c6;
}
#sec-story .story-p2 {
  font-family: "OCR A Std", "Share Tech Mono", monospace;
  font-size: 18px;
  line-height: 1.4;
  color: #000;
}
#sec-story .story-p2 p { margin: 0; }
#sec-story .story-p2 .mb { margin-bottom: 20px; }

/* ---- Right image collage (761x720) ---- */
#sec-story .story-img { position: relative; width: 761px; height: 720px; flex: none; }

#sec-story .sabs { position: absolute; }
#sec-story .sabs > img,
#sec-story .story-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  max-width: none;
}
#sec-story .story-clip { position: absolute; inset: 0; overflow: hidden; }
#sec-story .story-clip img { left: 0; top: 0; inset: auto; }

/* decorative frames */
#sec-story #story-126-2265 { inset: 41.57% -0.88% 33.91% 63.59%; }
#sec-story #story-126-2268 { inset: 75.47% 62.69% 0.01% 0; }
#sec-story #story-126-2271 { inset: 9.71% -10.22% 63.98% 71.59%; }
#sec-story #story-126-2281 { inset: 73.51% -10.25% 0.11% 74.15%; }
#sec-story #story-126-2285 { inset: 34.73% 54.71% 38.9% 9.19%; }
#sec-story #story-126-2289 { inset: 9.09% 57.39% 69.41% 5.1%; }
/* TV outline */
#sec-story #story-126-2294 { inset: 16.58% 4.19% 0.58% 14.37%; }
#sec-story #story-126-2297 { inset: 16.58% 4.19% 0.58% 14.37%; }
/* TV screen bg + TV set photo (clipped) */
#sec-story #story-126-2300 { position: absolute; inset: 24.85% 10.43% 20.64% 22.66%; }
#sec-story #story-126-2302 { position: absolute; inset: 17.48% 6.25% 1.75% 15.31%; }

/* basketball + hand composite, clipped to mask shape */
#sec-story #story-126-2306 {
  position: absolute;
  left: 167.24px;
  top: -66.5px;
  width: 496px;
  height: 652px;
  -webkit-mask-image: var(--story-bball-mask);
  mask-image: var(--story-bball-mask);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 23px -0.5px;
  mask-position: 23px -0.5px;
  -webkit-mask-size: 433.5px 602.8px;
  mask-size: 433.5px 602.8px;
}
#sec-story #story-126-2306 img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  max-width: none;
}

/* ---- MOBILE (<=768px): stack text over collage, fluid ---- */
@media (max-width: 768px) {
  #sec-story {
    height: auto;
    overflow: visible;
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
    padding: 40px 24px;
  }
  #sec-story .story-text { width: 100%; gap: 20px; }
  #sec-story .story-h {
    font-size: 34px;
    line-height: 1.05;
    white-space: normal;
    text-shadow: -2px 2px 0 #0051c6;
  }
  #sec-story .story-p1 { font-size: 16px; }
  #sec-story .story-p2 { font-size: 15px; }

  /* collage: fluid width, preserved aspect so % children + mask scale with it */
  #sec-story .story-img {
    width: min(761px, 92vw);
    height: auto;
    aspect-ratio: 761 / 720;
    align-self: center;
    overflow: visible;
  }
  /* basketball composite: convert fixed px -> % so it scales with the box */
  #sec-story #story-126-2306 {
    left: 21.98%;
    top: -9.24%;
    width: 65.18%;
    height: 90.56%;
    -webkit-mask-size: 87.4% 92.45%;
    mask-size: 87.4% 92.45%;
    -webkit-mask-position: 36.8% -1.02%;
    mask-position: 36.8% -1.02%;
  }
}

/* MOBILE refinement: let paragraphs flow (drop desktop hard breaks) and wrap */
@media (max-width: 768px) {
  #sec-story .story-p2 br { display: none; }
  #sec-story .story-p1,
  #sec-story .story-p2 { overflow-wrap: anywhere; }
  #sec-story .story-p2 { font-size: 14px; }
}