/* ============================================================
   Asma Irfan · RESEARCH (research.html)
   ------------------------------------------------------------
   Same language, quieter register: Literata Light instead of
   Regular, a smaller display scale, and slower reveals. The
   PAGE owns the background here - sections stay transparent so
   the atmosphere layer can read through all of them.
   ============================================================ */
@layer page{

.research{position:relative}

/* ---------- atmosphere: the only gradients on the site ------ */
.atmo{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.atmo > *{position:absolute}
.atmo-dawn{
  top:-380px;left:calc(50% - 200px);width:1000px;height:700px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(223,165,136,.45), rgba(223,165,136,0) 70%);
}
.atmo-ring{border-radius:50%;border:1.5px solid rgba(185,112,75,.08)}
.atmo-ring--outer{width:1950px;height:1950px;top:-1005px;left:calc(50% + 540px - 975px);border-color:rgba(185,112,75,.05)}
.atmo-ring--inner{width:1400px;height:1400px;top:-730px;left:calc(50% + 540px - 700px)}
.atmo-ember{
  width:640px;height:640px;top:2050px;right:-160px;border-radius:50%;
  background:radial-gradient(circle, rgba(223,165,136,.16), rgba(223,165,136,0) 68%);
}
.atmo-dusk{
  width:950px;height:720px;bottom:340px;left:-340px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(185,112,75,.18), rgba(185,112,75,0) 70%);
}
/* The nav is deliberately NOT in this list. It needs position:sticky
   from shell.css, and position:relative here silently overrode it -
   the research header has never stuck. It still paints above .atmo
   because sticky is a positioned element and its z-index is 50. */
.research section,
.research .footer{position:relative;z-index:1}

/* ---------- the quieter register ---------- */
.research .h2{font-weight:300;font-size:var(--fd-l)}
.research [data-reveal]{--dur:650ms}
.section--ruled{border-top:1px solid var(--hairline-soft)}

/* ============================================================
   HERO
   ============================================================ */
.r-hero{
  padding:clamp(44px,5.4vw,72px) var(--edge) clamp(48px,5.4vw,70px);
  min-height:90svh;
  display:flex;flex-direction:column;justify-content:center;
}
.r-hero h1{
  font:300 var(--fd-2xl)/1.12 var(--serif);
  letter-spacing:-.01em;margin-top:clamp(18px,2vw,24px);
}
.r-hero h1 em{font-style:italic;color:var(--clay)}
.r-hero .lead{margin-top:var(--sp-5);max-width:660px;font-size:clamp(15px,1.3vw,18px)}
.r-hero .hero-ctas{margin-top:clamp(24px,2.6vw,32px);display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.r-hero .creds{margin-top:clamp(28px,4vw,52px);--k-weight:400;--k-lh:2;--k-track:.2em}

/* load-in orchestration, matching the practice page */
.r-hero [data-stage]{opacity:0;transform:translateY(12px);animation:rise .5s var(--ease-out) forwards}
.r-hero [data-stage="1"]{animation-delay:.05s}
.r-hero [data-stage="2"]{animation-delay:.15s}
.r-hero [data-stage="3"]{animation-delay:.27s}
.r-hero [data-stage="4"]{animation-delay:.39s}
.r-hero [data-stage="5"]{animation-delay:.5s}

@media (max-width:700px){
  .r-hero{padding:clamp(24px,7vw,40px) var(--edge) clamp(32px,9vw,48px)}
  .r-hero h1{font-size:clamp(32px,9.6vw,44px)}
  .r-hero .lead{font-size:16px}
  .r-hero .hero-ctas{flex-direction:column;align-items:stretch}
  .r-hero .hero-ctas .btn{width:100%}
}

/* ============================================================
   THE THROUGH-LINE - one arc asked at increasing depth, so
   each step rises a little further than the one above it.
   ============================================================ */
.ladder{max-width:820px}
.ladder{--dot-x:17px;--dot-y:32px}
.lad-step{display:flex;gap:var(--sp-7);padding:var(--sp-5) 0;position:relative}

/* the connecting line: one segment per step, meeting end to end, so
   it stretches with whatever the steps contain rather than being a
   fixed height */
.lad-step::before{
  content:"";position:absolute;
  left:var(--dot-x);top:0;bottom:0;width:1.5px;
  background:rgba(185,112,75,.35);
}
.lad-step:first-child::before{top:var(--dot-y)}
.lad-step:last-child::before{bottom:calc(100% - var(--dot-y))}

.lad-dot{
  flex:none;align-self:flex-start;position:relative;z-index:1;
  width:36px;height:22px;
}
.lad-dot::before{
  content:"";position:absolute;left:50%;top:8px;
  width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--clay);
  box-shadow:0 0 0 4px var(--cream);      /* keeps the line off the dot */
  transform:scale(.5);
  transition:transform .45s var(--ease-spring);
}
.lad-step.in .lad-dot::before{transform:scale(1)}
/* the doctorate is proposed, not finished - leave its dot open */
.lad-step:last-child .lad-dot::before{
  width:10px;height:10px;margin-left:-5px;
  background:var(--cream);
  border:1.5px solid var(--clay-deep);
}
.lad-title{margin-top:var(--sp-2);font:400 clamp(17.5px,1.7vw,24px)/1.32 var(--serif);color:var(--ink)}
.lad-desc{margin-top:var(--sp-2);font:300 clamp(13.5px,1.15vw,15.5px)/1.62 var(--sans);color:var(--dim);max-width:var(--measure)}
.lad-tags{margin-top:10px;--k-weight:500;--k-size:var(--fs-3xs);--k-track:.18em}

.lad-step[data-reveal]{transform:translateY(var(--rise,10px))}
.lad-step:nth-child(1){--rise:8px}
.lad-step:nth-child(2){--rise:12px}
.lad-step:nth-child(3){--rise:16px}
.lad-step.in{transform:none}

/* ============================================================
   THE RECORD
   ============================================================ */
/* The record reads as a list of entries, not a stack of cards: the
   left column carries provenance, the right carries the study. Same
   fixed-label / fluid-body meter the rest of the site uses. */
.cites{--row-y:var(--sp-8);max-width:var(--measure-wide)}
.cite{display:flex;gap:var(--sp-9)}
.cite-meta{flex:none;width:196px}
.cite-meta .kicker{display:block;margin-bottom:5px}
.cite-meta p + p{margin-top:2px}
.cite-meta p:not(.kicker){font:400 var(--fs-s)/1.5 var(--sans);color:var(--muted)}
.cite-body{flex:1;min-width:0}
.cite-body h3{font:italic 400 clamp(16px,1.5vw,20px)/1.42 var(--serif);color:var(--ink)}
.cite-body p{margin-top:var(--sp-2);font:300 clamp(13px,1.1vw,14.5px)/1.62 var(--sans);color:var(--dim)}
@media (max-width:760px){
  .cite{flex-direction:column;gap:var(--sp-3)}
  .cite-meta{width:100%}
}

.pull{
  margin-top:var(--sp-7);padding-left:22px;max-width:680px;
  border-left:2px solid rgba(185,112,75,.7);
}
.pull p:first-child{font:italic 400 clamp(15px,1.35vw,18px)/1.52 var(--serif);color:var(--ink)}
.pull p:last-child{margin-top:var(--sp-2);font:300 clamp(12.5px,1.1vw,14.5px)/1.58 var(--sans);color:var(--muted)}

/* ============================================================
   WHY PAKISTAN MATTERS - a sand band that owns its own pool
   ============================================================ */
.sampling{position:relative;overflow:hidden}
.sampling::after{
  content:"";position:absolute;right:-40px;top:var(--sp-9);width:560px;height:420px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(223,165,136,.22), rgba(223,165,136,0) 70%);
  pointer-events:none;
}
.sampling > *{position:relative;z-index:1}
/* the argument on the left, the evidence for it on the right */
.samp-wrap{--split-gap:clamp(32px,5vw,72px);position:relative;z-index:1}
.samp-head{flex:none;width:min(460px,100%);margin-bottom:0}
.samp-rows{--row-y:var(--sp-5)}
.samp b{display:block;font:600 15px/1.5 var(--sans);color:var(--ink)}
.samp p{font:300 var(--fs-s)/1.58 var(--sans);color:var(--dim)}

/* ============================================================
   THE PROPOSITION - transcript vs. what it cannot show
   ============================================================ */
.prop-transcript{flex:none;width:min(420px,100%);--p-pad:var(--sp-8)}
.prop-transcript ul{margin-top:14px;--row-y:var(--sp-3)}
.prop-transcript li{font:400 var(--fs-m)/1.5 var(--sans);color:var(--dim)}

.prop-rest{
  flex:1;min-width:0;padding:30px 0 0 var(--sp-8);
  opacity:0;transform:translateY(10px);
  transition:opacity .55s var(--ease-out) .25s,transform .55s var(--ease-out) .25s;
}
[data-reveal].in .prop-rest{opacity:1;transform:none}
.prop-items{margin-top:14px;--row-y:var(--sp-3)}
.prop-item h4{font:400 19px/1.34 var(--serif);color:var(--ink)}
.prop-item p{margin-top:var(--sp-1);font:300 14px/1.58 var(--sans);color:var(--dim);max-width:560px}

@media (max-width:900px){
  .prop-rest{padding-left:0}
}

/* ============================================================
   CONTACT
   ============================================================ */
.rcontact-left{max-width:var(--col-panel)}
.rcontact-left .hero-ctas{margin-top:30px;display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}
.practice-link{margin-top:22px;font:300 var(--fs-s)/1.5 var(--sans);color:var(--muted)}
.practice-link a{color:var(--clay-deep);font-weight:500}

.reply-card{flex:none;width:min(420px,100%);--p-pad:var(--sp-8)}
.reply-card ul{margin-top:var(--sp-3);--row-y:var(--sp-3)}
.reply-card li{
  display:flex;align-items:center;gap:var(--sp-3);
  font:400 var(--fs-m)/1.48 var(--sans);color:var(--ink);
}
.reply-card li::before{content:"";flex:none;width:18px;height:2px;border-radius:2px;background:var(--clay)}
.reply-card .note{margin-top:var(--sp-4);font:italic 400 14px/1.4 var(--serif);color:var(--muted)}

@media (max-width:900px){
  .rcontact-left .hero-ctas{flex-direction:column;align-items:stretch}
  .rcontact-left .btn{width:100%}
  .atmo-ring,.atmo-ember{display:none}
}

}