/* ============================================================
   SATWA SAHELI, REWORKED                            7 Oct 2026
   ------------------------------------------------------------
   Linked from ports/8002/index.html only. Every rule is scoped
   to .sah2, so the :8003 page (which keeps the old section) is
   untouched even though it shares this css/ folder.

   Left: the story, the two roles and the stats.
   Right: the "Become a Saheli" card, which replaced the two
   empty dashed photo tiles.
   ============================================================ */

.sah2 .sahgrid{grid-template-columns:1.1fr .9fr;align-items:center;}

.sah2 .sahtag{
  margin:2px 0 0;
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.05rem,1.5vw,1.25rem);color:var(--gold-dk);
}
.sah2 .lede{max-width:60ch;}
.sah2 .sahbody{
  margin:12px 0 0;max-width:60ch;
  color:var(--green);font-size:.98rem;line-height:1.65;
}

/* the two roles - same as journey-card.css, which this page does not load */
.sah2 .sahroles{
  list-style:none;margin:clamp(18px,2.2vw,26px) 0 0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px);
  max-width:64ch;
}
.sah2 .sahroles li{padding-left:16px;border-left:2px solid rgba(180,112,122,.55);}
.sah2 .sahroles b{
  display:block;margin:0 0 5px;
  font:600 .74rem/1.2 "Jost",system-ui,sans-serif;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-dk);
}
.sah2 .sahroles span{display:block;color:var(--green);font-size:.93rem;line-height:1.55;}

.sah2 .sahstats{margin-top:clamp(22px,2.8vw,32px);}

/* ---- the join card --------------------------------------- */
.sah2 .sahcard{
  position:relative;
  background:#fdf6f3;
  border:1px solid rgba(127,90,15,.22);
  border-radius:20px;
  padding:clamp(24px,3vw,38px);
  box-shadow:0 24px 48px -30px rgba(80,40,30,.45);
}
.sah2 .sahcard::before{            /* the gold rule across the top */
  content:"";position:absolute;left:clamp(24px,3vw,38px);right:clamp(24px,3vw,38px);top:0;
  height:3px;border-radius:0 0 3px 3px;
  background:linear-gradient(90deg,var(--gold-dk),#d4a63c);
}
.sah2 .sahcard h3{
  margin:4px 0 0;
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 45,"WONK" 1;
  font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;line-height:1.15;color:var(--ink);
}
.sah2 .sahcard-lede{margin:8px 0 0;color:var(--green);font-size:1rem;line-height:1.6;}

.sah2 .sahsteps{
  list-style:none;counter-reset:sahstep;
  margin:clamp(18px,2.2vw,24px) 0 0;padding:0;display:grid;gap:14px;
}
.sah2 .sahsteps li{
  counter-increment:sahstep;
  display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:start;
}
.sah2 .sahsteps li::before{
  /* 20 Oct 2026, owner: no numbers - a gold dot in place of the step number. */
  content:"";grid-row:span 2;justify-self:center;margin-top:6px;
  width:10px;height:10px;border-radius:50%;
  display:grid;place-items:center;
  font:600 .9rem/1 "Jost",system-ui,sans-serif;
  color:#fdf6f3;background:var(--gold-dk);
}
.sah2 .sahsteps b{
  font:600 .98rem/1.3 "Jost",system-ui,sans-serif;color:var(--ink);padding-top:6px;
}
.sah2 .sahsteps span{color:var(--green);font-size:.92rem;line-height:1.5;}

.sah2 .sahcta{margin-top:clamp(22px,2.6vw,28px);}

@media (max-width:900px){
  .sah2 .sahgrid{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .sah2 .sahroles{grid-template-columns:1fr;}
  .sah2 .sahcta a{flex:1 1 100%;text-align:center;justify-content:center;}
  .sah2 .sahstats{gap:18px 32px;}
}

/* ============================================================
   .sah3 - the uncongested version.                  7 Oct 2026
   Logo #05 (Horizontal + tagline) as the heading; the detail
   lives on saheli.html, reached by the two .sahmore links.
   ============================================================ */
.sah3 .sahlock{
  display:flex;align-items:center;gap:clamp(14px,1.8vw,22px);
  margin:10px 0 clamp(18px,2.2vw,26px);
}
.sah3 .sahlock img{width:clamp(78px,8vw,112px);height:auto;flex:none;display:block;}
.sah3 .sahlock-w{display:flex;flex-direction:column;line-height:1;}
.sah3 .sahlock-name{
  font-family:"Cinzel",serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(2rem,3.6vw,3.1rem);letter-spacing:.04em;color:#3f6b34;
}
.sah3 .sahlock-name span{
  display:block;margin-top:8px;padding-left:.2em;
  font-weight:500;font-size:.4em;letter-spacing:.34em;color:#4a2a1e;
}
.sah3 .sahlock-tag{
  margin-top:12px;
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(.98rem,1.3vw,1.15rem);color:var(--gold-dk);letter-spacing:0;
}
.sah3 .sahcard{align-self:center;}
.sah3 .sahmore{
  display:inline-block;margin-top:clamp(20px,2.4vw,28px);
  font-weight:500;color:var(--green);text-decoration:none;
  border-bottom:1px solid var(--gold-dk);padding-bottom:2px;
}
.sah3 .sahmore:hover{color:var(--gold-dk);}
.sah3 .sahcard .sahmore{margin-top:16px;}

/* ---- saheli.html, the full story page ------------------------ */
.sahpage .sahgrid{align-items:start;}
.sahpage{padding-top:clamp(36px,5vw,64px);}
.sahpage .sahback{
  display:inline-block;margin-bottom:22px;font-size:.92rem;
  color:var(--green);text-decoration:none;
}
.sahpage .sahback:hover{color:var(--gold-dk);}
.sahpage .sahdv{margin:-8px 0 18px;font-size:1.3rem;color:var(--gold-dk);}
.sahpage .sahh2{
  margin:clamp(30px,4vw,44px) 0 0;
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(1.3rem,2vw,1.6rem);color:var(--ink);
}
.sahpage .sahroles{max-width:none;}
.sahpage .sahcard{position:sticky;top:110px;scroll-margin-top:110px;}
@media (max-width:900px){.sahpage .sahcard{position:relative;top:auto;margin-top:34px;}}
.sahpage .sahcard-h{
  margin:4px 0 0;
  font-family:"Fraunces",Georgia,serif;font-variation-settings:"SOFT" 45,"WONK" 1;
  font-size:clamp(1.5rem,2.4vw,2rem);font-weight:600;line-height:1.15;color:var(--ink);
}

/* ---- saheli.html fits one screen.                    7 Oct 2026
   The owner: "make the content in such a way that it fits the
   screen and doesnt go extra further". The section fills exactly
   the height under the menu and everything inside is sized to
   sit in it on a laptop (measured at 1440x740 and up), so the
   footer only starts once you scroll on purpose. Below 900px wide
   it goes back to one column and scrolls, as it must on a phone. */
@media (min-width:901px){
  .sahpage{
    min-height:calc(100svh - var(--navh,88px));
    display:flex;align-items:center;
    padding:clamp(14px,2.4vh,28px) 0;
  }
  .sahpage > .wrap{width:100%;}
  .sahpage .sahgrid{grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,64px);align-items:center;}
  .sahpage .sahback{margin-bottom:clamp(6px,1.4vh,14px);font-size:.86rem;}
  .sahpage .kick{margin-bottom:0;}
  .sahpage .sahlock{margin:clamp(4px,1vh,10px) 0 clamp(10px,1.8vh,18px);}
  .sahpage .sahlock img{width:clamp(72px,13vh,110px);}
  .sahpage .sahlock-name{font-size:clamp(1.9rem,6vh,2.8rem);}
  .sahpage .sahlock-name span{margin-top:5px;}
  .sahpage .sahlock-tag{margin-top:8px;font-size:clamp(.9rem,2vh,1.05rem);}
  .sahpage .sahdv{margin-top:6px;font-size:1.05rem;}
  .sahpage .lede{font-size:clamp(.92rem,2.1vh,1rem);line-height:1.6;margin:0;}
  .sahpage .sahbody{font-size:clamp(.88rem,2vh,.95rem);line-height:1.55;margin-top:8px;}
  .sahpage .sahh2{margin-top:clamp(14px,2.4vh,24px);font-size:clamp(1.1rem,2.6vh,1.35rem);}
  .sahpage .sahroles{margin-top:10px;}
  .sahpage .sahroles span{font-size:.88rem;line-height:1.45;}
  .sahpage .sahstats{margin-top:clamp(12px,2.2vh,20px);}
  .sahpage .sahstat b{font-size:clamp(1.5rem,4vh,2rem);}
  .sahpage .sahcard{position:relative;top:auto;padding:clamp(18px,3vh,30px) clamp(22px,2.4vw,32px);}
  .sahpage .sahcard-h{font-size:clamp(1.35rem,3.4vh,1.75rem);}
  .sahpage .sahcard-lede{font-size:.95rem;margin-top:6px;}
  .sahpage .sahsteps{margin-top:clamp(12px,2vh,18px);gap:clamp(8px,1.5vh,12px);}
  .sahpage .sahsteps span{font-size:.88rem;line-height:1.45;}
  .sahpage .sahcta{margin-top:clamp(14px,2.4vh,22px);}
}
@media (max-width:900px){
  .sahpage .sahdv{margin-top:6px;font-size:1.1rem;}
}