/* ==========================================================================
   Home — asymmetric editorial hero, dated context markers, dark Chittagong
   band, three-woman comparison, calm turn, seven-step pathway, closing grid.
   ========================================================================== */

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5.5rem) clamp(3.5rem, 8vw, 7rem);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.hero__ghost {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  font-size: clamp(11rem, 30vw, 27rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px var(--rule);
  opacity: .6;
}
.hero__ghost span { position: absolute; }
.hero__ghost span:first-child { top: -.16em; right: -.1em; }
.hero__ghost span:last-child  { bottom: -.22em; left: -.12em; }

.hero__grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .68fr);
  grid-template-areas:
    "intro aside"
    "tail  aside";
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: clamp(2rem, 4vw, 3.4rem);
  align-items: start;
}
.hero__intro { grid-area: intro; }
.hero__tail  { grid-area: tail; }
.hero__aside { grid-area: aside; position: relative; padding-top: clamp(.5rem, 3vw, 3rem); }

.hero__title {
  font-size: clamp(3.35rem, 13vw, 10rem);
  line-height: .84;
  letter-spacing: -.035em;
  margin-block: .1em .38em;
}
.hero__line { display: block; }
.hero__line--indent { padding-left: clamp(.6rem, 7%, 4rem); color: var(--oxblood); }

.hero__roles {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.28rem, 2.7vw, 2.1rem);
  line-height: 1.24;
  color: var(--ink);
  max-width: 20ch;
}

.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .7rem 1.4rem;
  margin-top: 1.6rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--rule);
}
.hero__dates {
  font-size: clamp(1.35rem, 2.4vw, 1.9rem);
  color: var(--ink);
  letter-spacing: .04em;
}
.hero__aka {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

.hero__lede { max-width: 50ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.1rem; }

.hero__figure { max-width: 27.5rem; margin-left: auto; }
.hero__vertical {
  position: absolute;
  top: 0; right: -2.6rem;
  writing-mode: vertical-rl;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.hero__scroll {
  position: relative;
  z-index: 2;
  width: var(--shell);
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  display: flex;
  align-items: center;
  gap: .9rem;
  font-family: var(--mono);
  font-size: .66rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.hero__scroll svg { color: var(--brass-ink); }

@media (max-width: 1100px) {
  .hero__vertical { display: none; }
}
@media (max-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "intro" "aside" "tail";
  }
  .hero__aside { padding-top: 0; }
  .hero__figure { max-width: 24rem; margin-inline: 0; }
  /* The ghost dates sit directly behind the wordmark once the grid stacks,
     so they are pulled back until they read as texture rather than type. */
  .hero__ghost { opacity: .28; }
}
@media (max-width: 560px) {
  .hero__figure { max-width: 100%; }
}

/* ---------------- 02 · Context ---------------- */
.context__head { max-width: 30ch; }
.context__title { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.context__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2.2rem, 5vw, 5rem);
  align-items: start;
}
.context__prose { padding-top: .35rem; }

.markers { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; }
.marker {
  display: grid;
  grid-template-columns: clamp(4.5rem, 9vw, 7.5rem) minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  padding-block: clamp(1.4rem, 3vw, 2.1rem);
  border-top: 1px solid var(--rule);
}
.marker:last-child { border-bottom: 1px solid var(--rule); }
.marker__year {
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  color: var(--oxblood);
  line-height: 1;
}
.marker__title { font-size: clamp(1.1rem, 1.6vw, 1.3rem); margin-bottom: .55rem; }
.marker__text { font-size: .95rem; line-height: 1.7; color: var(--ink-mute); }

.context__note { margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 900px) {
  .context__body { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- 03 · Chittagong band ---------------- */
.chit {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4.5rem, 10vw, 9rem);
}
.chit__plot {
  position: absolute;
  top: 50%;
  right: -8%;
  transform: translateY(-50%);
  width: min(46rem, 62vw);
  aspect-ratio: 1;
  opacity: .55;
  pointer-events: none;
}
.chit__plot svg { width: 100%; height: 100%; }

.chit__inner { position: relative; z-index: 2; }

.chit__date {
  font-size: clamp(2.6rem, 8.5vw, 6.5rem);
  line-height: .95;
  color: var(--brass-lt);
  letter-spacing: -.02em;
  margin-bottom: .3em;
}
.chit__title { max-width: 20ch; margin-bottom: clamp(2.2rem, 4.5vw, 3.6rem); }

.chit__cols {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.2rem, 5vw, 4.5rem);
  align-items: start;
}

.chit__ledger {
  background: rgba(42, 34, 26, .55);
  border: 1px solid var(--rule-night);
  padding: clamp(1.4rem, 3vw, 2.2rem);
  backdrop-filter: blur(2px);
}
.chit__ledger-h {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--brass-lt);
  margin-bottom: 1.4rem;
}
.chit__ledger dl { display: grid; gap: 0; margin: 0; }
.chit__ledger dl > div {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 1rem;
  padding-block: .8rem;
  border-top: 1px solid var(--rule-night);
}
.chit__ledger dt {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--night-mute);
}
.chit__ledger dd { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--night-text); }
.chit__ledger .tlink { margin-top: 1.6rem; }

.chit__note { margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (max-width: 1000px) {
  .chit__plot { right: -22%; opacity: .3; }
}
@media (max-width: 900px) {
  .chit__cols { grid-template-columns: minmax(0, 1fr); }
  .chit__ledger dl > div { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
}

/* ---------------- 04 · Women ---------------- */
.women__head { margin-bottom: clamp(2.8rem, 6vw, 4.5rem); }
.women__lede { margin-top: 1.8rem; }

.women__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--ink);
}
.wcard {
  padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.2rem, 2.2vw, 2rem) clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.wcard + .wcard { border-left: 1px solid var(--rule); }
.wcard--focus { background: var(--paper-deep); }
.wcard--focus::before {
  content: "";
  position: absolute;
  top: -1px; left: 0; right: 0;
  height: 3px;
  background: var(--oxblood);
}
.wcard__life {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .16em;
  color: var(--ink-faint);
  margin-bottom: 1.1rem;
}
.wcard__name { font-size: clamp(1.45rem, 2.3vw, 1.95rem); margin-bottom: .5rem; }
.wcard__role {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.02rem;
  color: var(--oxblood);
  line-height: 1.4;
  margin-bottom: 1.1rem;
}
.wcard__text { font-size: .95rem; line-height: 1.72; color: var(--ink-mute); }
.wcard__link { margin-top: 1.3rem; }

.women__pull {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2.2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.women__after .tlink { margin-top: 1.6rem; }

@media (max-width: 900px) {
  .women__list { grid-template-columns: minmax(0, 1fr); }
  .wcard + .wcard { border-left: 0; }
  .women__pull { grid-template-columns: minmax(0, 1fr); }
}

/* ---------------- 05 · The turn ---------------- */
.turn__grid {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 1fr);
  gap: clamp(2.2rem, 5vw, 5.5rem);
  align-items: start;
}
.turn__figure { max-width: 21rem; position: sticky; top: 7rem; }
.turn__prose { margin-top: 1.8rem; }
.turn__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.4rem 2rem;
  margin-top: 2.4rem;
}

@media (max-width: 900px) {
  .turn__grid { grid-template-columns: minmax(0, 1fr); }
  .turn__figure { position: static; max-width: 20rem; }
}

/* ---------------- 06 · Pathway ---------------- */
.path__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.path__lede { margin-top: 1.5rem; }

.path__list {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--rule-night);
}
.pstep {
  display: grid;
  grid-template-columns: clamp(3.5rem, 7vw, 6.5rem) minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 2.5rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(.5rem, 1.5vw, 1.5rem);
  border-bottom: 1px solid var(--rule-night);
  text-decoration: none;
  position: relative;
  transition: padding-left .45s var(--ease);
}
.pstep::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--night-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease);
  z-index: 0;
}
.pstep > * { position: relative; z-index: 1; }
.pstep:hover::before, .pstep:focus-visible::before { transform: scaleX(1); }
.pstep:hover, .pstep:focus-visible { padding-left: clamp(1rem, 2.5vw, 2.5rem); }

.pstep__n {
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  color: var(--brass);
  line-height: 1;
  transition: color .4s var(--ease);
}
.pstep:hover .pstep__n { color: var(--brass-lt); }

.pstep__body { display: grid; gap: .3rem; }
.pstep__title {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.6vw, 2.1rem);
  color: var(--paper);
  line-height: 1.12;
}
.pstep__desc {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--night-mute);
}
.pstep__arw {
  justify-self: end;
  font-size: 1.15rem;
  color: var(--brass);
  transition: transform .45s var(--ease);
}
.pstep:hover .pstep__arw { transform: translateX(6px); }

@media (max-width: 620px) {
  .pstep { grid-template-columns: 2.8rem minmax(0, 1fr); }
  .pstep__arw { display: none; }
}

/* ---------------- 07 · Close ---------------- */
.close__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: start;
}
.close__title { max-width: 16ch; margin-bottom: 1.8rem; }
.close__cta { margin-top: 2.4rem; }
.close__btn { padding-inline: clamp(1.85rem, 4vw, 3rem); }

.close__links { display: grid; gap: 0; list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--rule); }
.close__links a {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: .25rem 1rem;
  padding-block: clamp(1.1rem, 2.4vw, 1.6rem);
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  transition: background .35s var(--ease), padding-left .35s var(--ease);
}
.close__links a:hover, .close__links a:focus-visible { background: var(--paper-deep); padding-left: .8rem; }
.close__lnum { grid-row: span 2; font-size: 1.15rem; color: var(--brass-ink); padding-top: .15rem; }
.close__ltitle { font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); color: var(--ink); line-height: 1.2; }
.close__ldesc { font-size: .88rem; line-height: 1.6; color: var(--ink-mute); }

@media (max-width: 900px) {
  .close__grid { grid-template-columns: minmax(0, 1fr); }
}