/* ============================================================
   מועדון האזור — about page
   Editorial long-read: asymmetric photo bleed, margin hairline
   that draws itself down the story on scroll, full-width pull-quote.
   ============================================================ */

/* ---------- story: asymmetric editorial grid ---------- */
.story{
  position:relative;
  padding-block:clamp(3rem,7vw,5.5rem);
}
.story-rule{
  position:absolute;
  inset-block:clamp(3rem,7vw,5.5rem) clamp(3rem,7vw,5.5rem);
  inset-inline-start:calc(58.3% - 1px);
  inline-size:1px;
  background:var(--line-strong);
  transform-origin:top center;
  pointer-events:none;
  /* Progressive enhancement: fully drawn (final state) without JS or under
     reduced motion. GSAP sets the scaleY:0 starting point itself when the
     scrub scene actually runs (see the inline PAGE_MOTION script). */
  transform:scaleY(1);
}
@media (max-width:1023px){
  .story-rule{display:none;}
}
.story-inner{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  column-gap:clamp(1rem,3vw,2rem);
  row-gap:clamp(2.5rem,6vw,4.5rem);
}
.story-block{grid-column:1 / 8;}
.story-p{
  font-size:clamp(1.02rem,1.3vw,1.18rem);
  line-height:1.85;
  color:var(--ink-soft);
  max-width:60ch;
  margin:0;
}
.story-photo{margin:0;}
.story-photo--a{
  grid-column:8 / 13;
  grid-row:1;
  align-self:start;
  margin-block-start:clamp(2.5rem,6vw,5rem);
  aspect-ratio:4/5;
}
.story-photo--a img{block-size:100%;inline-size:100%;object-fit:cover;}
.story-body{grid-column:4 / 12;}
.story-quote{
  grid-column:2 / 12;
  margin:0;
  padding-block:clamp(1rem,3vw,2rem);
  border-block:1px solid var(--line);
}
.story-quote p{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.5rem,3.4vw,2.4rem);
  line-height:1.4;
  color:var(--ink);
  margin:0;
  max-width:34ch;
}
.story-photo--b{
  grid-column:1 / 7;
  position:relative;
  aspect-ratio:3/4;
}
/* img sizing comes from the base [data-parallax] overscan rules */
.story-photo--b::after{
  content:'';
  position:absolute;
  inset-inline:0;
  inset-block-end:0;
  block-size:45%;
  background:linear-gradient(to top, rgba(23,19,15,.68), transparent);
  pointer-events:none;
}
.story-photo-heading{
  z-index:1;
  position:absolute;
  inset-block-end:clamp(1rem,2.5vw,1.75rem);
  inset-inline-start:clamp(1rem,2.5vw,1.75rem);
  inset-inline-end:1rem;
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.3rem,2.6vw,2rem);
  line-height:1.18;
  color:var(--paper);
  text-shadow:0 2px 20px rgba(23,19,15,.6);
  margin:0;
}
.story-body--last{grid-column:6 / 13;}

/* ---------- cross-link to events ---------- */
.story-next{
  padding-block:clamp(3.5rem,8vw,6rem);
  border-block-start:1px solid var(--line);
  text-align:center;
}
.story-next-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1.25rem;
}
.story-next .section-title{margin:0;}
.story-next p{
  color:var(--ink-soft);
  font-size:1.05rem;
  margin:0;
  max-width:44ch;
}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .story-inner{row-gap:clamp(2rem,6vw,3rem);}
  .story-block,
  .story-photo--a,
  .story-body,
  .story-quote,
  .story-photo--b,
  .story-body--last{grid-column:1 / 13;}
  .story-photo--a{margin-block-start:0;aspect-ratio:16/10;}
  .story-photo--b{aspect-ratio:16/10;}
  .story-quote p{max-width:none;}
}

@media (max-width:639px){
  .story-quote p{font-size:clamp(1.4rem,6vw,1.8rem);}
  .story-photo-heading{font-size:1.35rem;}
}

/* lightened accent for text over dark photo */
.story-photo-heading .accent{color:#c96b77;}