/* ============================================================
   Asma Irfan · HOME (index.html)
   Only what is genuinely specific to the practice page. Labels,
   ruled lists, panels, splits and hover all come from
   primitives.css - if you find yourself re-declaring one of
   those here, promote it instead.
   ============================================================ */
@layer page{

/* ============================================================
   HERO
   ============================================================ */
.hero{
  padding:clamp(48px,6vw,84px) var(--edge) clamp(52px,6vw,76px);
  position:relative;
  min-height:90svh;
  display:flex;flex-direction:column;justify-content:center;
}
.hero-headline{
  position:relative;
  margin-top:clamp(20px,2.4vw,26px);
  font-family:var(--serif);font-weight:400;
  font-size:var(--fd-4xl);
  line-height:1.04;letter-spacing:-.01em;
}
.hero-headline .row{display:flex;gap:.24em;flex-wrap:wrap}
.hero-headline em{font-style:italic;color:var(--clay)}

/* The annotation sits on its own line under the headline, and the
   arrow sweeps up-right to "Properly." at the end of line two. It
   used to ride inside that row, beside the word; raising the gutter
   for the section rail took the content column from 1140px to
   1072px, and the headline alone now needs ~968px of that, so there
   is no longer room for it there. Its own line is deterministic
   either way. */
/* Sits under the end of line two, so it lands beneath "Properly." -
   the phrase it annotates - with the arrow rising back into it. Left
   aligned it was stranded at the margin, 300px from the word, and a
   76px arrow could not span that. */
.hero-anno{
  display:flex;justify-content:flex-end;align-items:flex-start;gap:10px;
  margin-top:var(--sp-2);padding-right:clamp(0px,3vw,64px);
  transform:rotate(-1.1deg);
  pointer-events:none;
}
.hero-anno .hand-note{
  display:block;max-width:28ch;
  font-size:clamp(17px,1.3vw,21px);
  text-wrap:balance;
}
.hero-anno .hand-arrow{flex:none;margin-top:.12em}

.hero-sub{
  margin-top:clamp(22px,3vw,40px);max-width:var(--measure-lead);
  font:400 clamp(15.5px,1.3vw,18px)/1.64 var(--sans);color:var(--dim);
}
.hero-ctas{margin-top:clamp(26px,3vw,36px);display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap}

/* load-in orchestration: the hero does not wait for scroll */
.hero [data-stage]{opacity:0;transform:translateY(12px);animation:rise .5s var(--ease-out) forwards}
.hero [data-stage="1"]{animation-delay:.05s}
.hero [data-stage="2"]{animation-delay:.13s}
.hero [data-stage="3"]{animation-delay:.21s}
.hero [data-stage="4"]{animation-delay:.36s}
.hero [data-stage="5"]{animation-delay:.44s}
/* handwriting still arrives last, just later than elsewhere */
.hero .hand-note{transition:none}
.hero .hand-note.in{
  opacity:1;clip-path:inset(0 -4% 0 0);
  transition:clip-path .7s var(--ease-out) .85s, opacity .1s linear .85s;
}
.hero .hand-arrow.in path{animation-delay:.9s}

@media (max-width:900px){
  .hero-ctas{flex-direction:column;align-items:stretch}
  .hero-ctas .btn{width:100%}
}

/* ---- the hero on a phone -----------------------------------------
   Rebuilt rather than scaled down. The desktop hero holds its lines
   with a flex row per line and a 90svh stage; on a 400px screen that
   produced a three-times-wrapped eyebrow, uneven gaps where the flex
   gap fell at a wrap, and a full-width rule under the microline. */
@media (max-width:700px){
  .hero{padding:clamp(24px,7vw,40px) var(--edge) clamp(32px,9vw,48px)}
  /* the aside is desktop-only: in one phone screenful it competes
     with the headline instead of supporting it */
  .hero-anno{display:none}
  /* the tracking is what made this wrap three times */
  .hero .eyebrow{font-size:9.5px;letter-spacing:.12em;line-height:1.7}

  /* On a phone the headline is the page. Three lines, one phrase
     each, at roughly twice the weight the fluid scale would have
     given - there is width to spare once each phrase owns a line. */
  .hero-headline{
    margin-top:var(--sp-5);
    font-size:clamp(46px,14.5vw,70px);
    line-height:1.12;
  }
  .hero-headline .row{display:block}
  /* deterministic, rather than relying on the line happening to wrap */
  .hero-headline .row em{display:block}

  .hero-sub{margin-top:var(--sp-7);font-size:16px;line-height:1.62}
  .hero-ctas{margin-top:var(--sp-6);gap:var(--sp-3)}
  /* centred under the two full-width buttons, and shrink-to-fit so
     the underline hugs the text rather than spanning the column */
  .hero-ctas .microline{align-self:center;margin-top:var(--sp-2)}
}

/* ============================================================
   WHAT PEOPLE BRING - index spotlight
   ============================================================ */
.wpb-rail{width:400px;flex:none;--row-y:var(--sp-5)}
.wpb-tab{
  display:flex;align-items:center;gap:18px;width:100%;text-align:left;
  transition:opacity var(--dur-fast);
}
.wpb-tab .n{--k-size:12px;--k-track:.16em;transition:color .25s}
.wpb-tab .q{font:500 var(--fs-base)/1.4 var(--sans);color:var(--dim);transition:color .25s,font-weight .25s}
.wpb-tab[aria-selected="true"] .n{--k-color:var(--clay-deep)}
.wpb-tab[aria-selected="true"] .q{color:var(--ink);font-weight:600}

.wpb-spot-inner{transition:opacity .25s var(--ease-out),transform .25s var(--ease-out)}
.wpb-spot-inner.swap{opacity:0;transform:translateY(var(--sp-2))}
.wpb-q{font:italic 400 var(--fd-l)/1.26 var(--serif);color:var(--ink)}
.wpb-rule{width:48px;height:3px;border-radius:2px;background:var(--clay);margin:var(--sp-5) 0}
.wpb-a{font:400 var(--fd-lead)/1.64 var(--sans);color:var(--dim);max-width:var(--col-panel)}
.wpb-actions{display:flex;align-items:center;gap:var(--sp-6);margin-top:var(--sp-5);flex-wrap:wrap}
.wpb-next:hover{--k-color:var(--clay)}
/* the control that makes the rotation stoppable, so it has to be
   visible rather than implied by hovering */
.wpb-pause{--k-color:var(--muted);padding:4px 0;transition:color .15s}
.wpb-pause:hover{--k-color:var(--clay-deep)}
.wpb-foot{margin-top:var(--sp-8);font:400 15px/1.5 var(--sans);color:var(--muted)}

@media (max-width:900px){
  .wpb-body{gap:var(--sp-6)}
  .wpb-spot{order:-1}
  .wpb-rail{width:100%}
}

/* ============================================================
   A FIRST SESSION - timeline with a scroll-scrubbed spine
   ============================================================ */
.timeline{position:relative;max-width:720px}
.tl-spine{
  position:absolute;left:19px;top:var(--sp-9);bottom:var(--sp-10);width:1.5px;
  background:rgba(185,112,75,.35);
  transform-origin:top;transform:scaleY(var(--spine,0));
}
.tl-step{display:flex;gap:30px;padding:18px 0}
.tl-step:first-child{padding-top:0}
.tl-bubble{
  flex:none;width:40px;height:40px;border-radius:50%;
  background:var(--white);border:1.5px solid var(--clay);
  display:flex;align-items:center;justify-content:center;
  font:600 15px/1 var(--sans);color:var(--clay-deep);
  transform:scale(.8);transition:transform .45s var(--ease-spring);
  position:relative;z-index:1;
}
[data-reveal].in .tl-bubble{transform:scale(1)}
.tl-title{font:400 var(--fd-s)/1.3 var(--serif);color:var(--ink)}
.tl-desc{margin-top:var(--sp-2);font:400 15px/1.62 var(--sans);color:var(--dim);max-width:var(--measure)}
.mid-cta{margin-top:36px;display:inline-block;font:600 16px/1 var(--sans);color:var(--clay-deep)}
.mid-cta:hover{color:var(--clay)}

/* ============================================================
   WHAT WE WORK TOWARD - from / to
   ============================================================ */
.ft-rows{--row-y:var(--sp-7)}
.ft-row{display:flex;align-items:center}
.ft-from{width:var(--col-label);flex:none;font:italic 400 var(--fs-xl)/1.4 var(--serif);color:var(--muted)}
.ft-arrow{padding:0 var(--sp-9);font:600 22px/1 var(--sans);color:var(--clay);transform:scale(0);transition:transform .4s var(--ease-spring) .3s}
[data-reveal].in .ft-arrow{transform:scale(1)}
.ft-to{
  font:400 var(--fs-2xl)/1.36 var(--serif);color:var(--ink);
  opacity:0;transform:translateX(-10px);
  transition:opacity .4s var(--ease-out) .3s,transform .4s var(--ease-out) .3s;
}
[data-reveal].in .ft-to{opacity:1;transform:none}
.ft-close{margin-top:var(--sp-7);font:italic 400 clamp(14.5px,1.2vw,17px)/1.52 var(--serif);color:var(--dim);max-width:var(--measure)}

@media (max-width:900px){
  .ft-rows{--row-y:var(--sp-5)}
  .ft-row{flex-direction:column;align-items:flex-start;gap:var(--sp-2)}
  .ft-from{width:100%;font-size:17px}
  .ft-arrow{padding:0;transform:rotate(90deg) scale(0)}
  [data-reveal].in .ft-arrow{transform:rotate(90deg) scale(1)}
  .ft-to{font-size:var(--fs-2xl)}
}

/* ============================================================
   WHO I AM - ink band
   ============================================================ */
.who-left{max-width:600px}
.who .h2{color:var(--on-dark)}
.who-copy{margin-top:var(--sp-7);font:400 clamp(14.5px,1.2vw,17px)/1.66 var(--sans);color:var(--on-dark-dim);max-width:560px}
.who-link{display:inline-block;margin-top:var(--sp-7);font:600 15px/1 var(--sans);color:var(--clay-light)}
.who-link:hover{color:var(--on-clay)}
.who-creds{flex:1;min-width:280px;--row-y:var(--sp-4)}
.cred b{display:block;font:600 var(--fs-base)/1.4 var(--sans);color:var(--on-dark)}
.cred span{font:400 var(--fs-s)/1.5 var(--sans);color:var(--on-dark-dim)}

/* ============================================================
   WRITING - featured panel + ruled list
   ============================================================ */
.blog-featured{--p-pad:var(--sp-9);flex:none;width:min(var(--col-panel),100%)}
.blog-featured h3{margin-top:var(--sp-4);font:italic 400 var(--fd-m)/1.26 var(--serif);color:var(--ink)}
.blog-featured p{margin-top:var(--sp-4);font:400 var(--fs-base)/1.62 var(--sans);color:var(--dim);max-width:440px}
.blog-featured .btn{margin-top:22px;padding:14px 26px;font-size:14px}

.blog-list{flex:1;min-width:0;--row-y:var(--sp-6)}
.blog-item{display:block}
.blog-item h4{
  margin-top:6px;font:italic 400 var(--fs-xl)/1.32 var(--serif);color:var(--ink);
  position:relative;display:inline-block;transition:transform var(--dur-fast) var(--ease-out);
}
.blog-item h4::after{
  content:"";position:absolute;left:0;bottom:-3px;height:2px;width:0;
  background:var(--clay);transition:width .25s var(--ease-out);
}
.blog-item:hover h4{transform:translateX(6px)}
.blog-item:hover h4::after{width:100%}
.blog-item p{margin-top:6px;font:400 14px/1.56 var(--sans);color:var(--dim)}

@media (max-width:900px){.blog-cols{gap:10px}}

/* ============================================================
   WHAT IT COSTS - the price is the largest type on the page
   ============================================================ */
/* The oval has to be a good deal larger than the text, not merely
   offset from it: an ellipse drawn tight to a wide box passes
   through the first and last glyphs, because its height falls away
   to nothing at the far left and right. Padding in em keeps the
   clearance proportional as the price scales. */
.cost-pricewrap{position:relative;display:inline-block;padding:.44em .95em;margin-top:var(--sp-5)}
.cost-price{font:400 var(--fd-3xl)/1.1 var(--serif);color:var(--ink);position:relative;z-index:1}
.cost-circle{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.cost-circle ellipse{
  fill:none;stroke:var(--clay);stroke-opacity:.55;stroke-width:3;
  stroke-dasharray:1;stroke-dashoffset:1;      /* main.js measures the real length */
  transform:rotate(-1.5deg);transform-origin:center;
}
.in .cost-circle ellipse{animation:circledraw .9s var(--ease-out) .1s forwards}
@keyframes circledraw{to{stroke-dashoffset:0}}
.cost-anno{display:inline-flex;align-items:center;gap:var(--sp-2);margin-left:var(--sp-7);transform:rotate(-2deg);vertical-align:middle}
.cost-sub{margin-top:var(--sp-2);font:400 var(--fs-l)/1.5 var(--sans);color:var(--dim)}

/* The demo is a named offering, not a discount on a paid session,
   so it gets its own surface rather than a line of small print. A
   sand panel on the white band reads as distinct without inventing
   a new idiom. */
/* Wide screens keep the site's left-aligned reading order, with the
   button on the far right of the panel. Centring is a phone-only
   move: once the panel is a single narrow column, a left-aligned
   block with a full-width button under it looks lopsided. */
.demo{
  --p-pad:var(--sp-7) var(--sp-8);
  margin-top:var(--sp-7);max-width:1140px;   /* aligns with .facts below */
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-9);
}
.demo .kicker{display:block}
.demo-text{min-width:0}
.demo-line{margin-top:10px;font:400 var(--fd-s)/1.3 var(--serif);color:var(--ink)}
.demo-note{
  margin-top:var(--sp-2);max-width:54ch;
  font:400 var(--fs-m)/1.62 var(--sans);color:var(--dim);
}
.demo-cta{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.demo-fine{font:400 12px/1.4 var(--sans);color:var(--muted)}
@media (max-width:760px){
  .demo{
    --p-pad:var(--sp-6) var(--sp-5);
    flex-direction:column;align-items:center;text-align:center;gap:var(--sp-5);
  }
  .demo-note{margin-inline:auto;max-width:none}
  .demo-cta{align-self:stretch;align-items:stretch}
  .demo-cta .btn{width:100%}
}

.facts{margin-top:36px;max-width:1140px}
.fact{display:flex;gap:var(--sp-6)}
.fact .k{flex:none;width:110px}
.fact p{font:400 var(--fs-base)/1.58 var(--sans);color:var(--dim)}

@media (max-width:900px){
  /* Below the price rather than beside it, so the arrow is flipped
     to sweep up at the figure instead of down away from it, and the
     whole aside gets room rather than being tucked under the oval. */
  .cost-anno{
    display:flex;align-items:center;gap:var(--sp-2);
    margin:var(--sp-4) 0 0;transform:rotate(-1.4deg);
  }
  .cost-anno .hand-arrow{transform:scaleY(-1);width:54px;height:23px}
  .cost-anno .hand-note{font-size:19px}
  .cost-sub{margin-top:var(--sp-5)}
  .fact{flex-direction:column;gap:var(--sp-1)}
}

/* ============================================================
   THE QUIET WORRIES - ink band FAQ
   ============================================================ */
.faq-rows{--row-y:var(--sp-7)}
.faq-row{display:flex;gap:70px}
.faq-q{flex:none;width:min(var(--col-label),100%);font:italic 400 clamp(18.5px,1.7vw,24px)/1.38 var(--serif);color:var(--on-dark-dim)}
.faq-a{font:400 var(--fs-base)/1.64 var(--sans);color:var(--on-dark);max-width:560px;opacity:0;transition:opacity .5s var(--ease-out) .2s}
[data-reveal].in .faq-a{opacity:1}

@media (max-width:900px){
  .faq-rows{--row-y:var(--sp-5)}
  .faq-row{flex-direction:column;gap:10px}
}

/* ============================================================
   SAY HELLO - the composer, on the single clay band
   ============================================================ */
.composer-left{max-width:var(--col-panel)}
.composer-left .h2,
.composer-left .h2 em{color:var(--on-clay)}
.composer-left .lead{color:var(--on-clay-dim)}
/* scoped: unscoped, its max-width leaked into the footer's crisis
   block and capped it at 440px - page layer beats shell layer */
.composer-left .crisis{margin-top:30px;font:500 var(--fs-xs)/1.6 var(--sans);color:var(--on-clay-dim);max-width:440px}

.composer{--p-pad:0;flex:1;min-width:0;max-width:var(--col-panel);color:var(--ink);overflow:hidden}
.composer-head{
  display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-4) var(--sp-7);border-bottom:1px solid var(--hairline);
  font:600 13.5px/1 var(--sans);
}
.composer-head .dot{width:9px;height:9px;border-radius:50%;background:#4ECB71}
.composer-head span{font:400 var(--fs-xs)/1 var(--sans);color:var(--muted)}

.composer-controls{background:rgba(246,238,225,.5);padding:var(--sp-5) var(--sp-7);display:flex;flex-direction:column;gap:14px}
.chip-row{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.chip-row .label{font:500 var(--fs-xs)/1 var(--sans);color:var(--muted)}
.chip{
  border-radius:var(--radius-pill);padding:var(--sp-2) var(--sp-4);
  font:500 var(--fs-xs)/1 var(--sans);color:var(--dim);
  border:1px solid var(--hairline-strong);
  transition:background .15s,color .15s,border-color .15s,transform .15s;
}
.chip:hover{border-color:var(--clay)}
.chip[aria-pressed="true"]{background:var(--clay);border-color:var(--clay);color:#fff;font-weight:600}

.composer-body{padding:22px var(--sp-7)}
.composer-msg{font:400 var(--fs-l)/1.62 var(--serif);color:var(--ink)}
.composer-msg .frag{color:var(--clay-deep)}
.frag.flash{animation:flash .35s var(--ease-out)}
@keyframes flash{0%{color:var(--clay);opacity:.35}100%{opacity:1}}
.caret{
  display:inline-block;width:1px;height:1.05em;background:var(--ink);
  vertical-align:-.15em;margin-left:2px;animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{50%{opacity:0}}
.composer-hint{margin-top:var(--sp-2);font:400 12px/1 var(--sans);color:var(--muted)}
.composer-foot{display:flex;align-items:center;gap:var(--sp-3);padding:14px var(--sp-7) 22px}
.composer-foot .btn{padding:14px var(--sp-7);font-size:14px}
.composer-foot .alt{font:500 13.5px/1 var(--sans);color:var(--clay-deep)}

/* handoff only: no form, so the note just points at the address */
.composer-note{
  padding:0 var(--sp-7) var(--sp-6);
  font:400 var(--fs-xs)/1.6 var(--sans);color:var(--muted);
}
.composer-note a{color:var(--clay-deep);border-bottom:1px solid rgba(154,87,50,.35)}
.composer-msg:focus{outline:none}
.composer-msg:focus .caret{display:none}

@media (max-width:900px){
  .composer{max-width:none}
  .composer-foot{flex-direction:column;align-items:stretch;gap:10px}
  .composer-foot .btn{width:100%}
  .composer-foot a.alt{text-align:center}
}

/* ---- the middle band, 901px to 1395px ----------------------
   Above 1395px a 520px panel sits happily beside a 520px column
   with an 80px gap. Below it that row does not fit, and because
   only one side was flexible it absorbed the entire shortfall: at
   976px the composer card and the essay list were both 158px wide,
   with their neighbours still at a full 520px.
   So in this band the gap tightens and both sides flex, which shares
   the squeeze rather than handing it all to one column. Nothing here
   applies at the widths above, which are unchanged. */
@media (min-width:901px) and (max-width:1395px){
  .composer-wrap,.blog-cols,.wpb-body,.who{--split-gap:var(--sp-8)}

  .composer-left{flex:1 1 300px}
  .composer{flex:1 1 380px}

  .blog-featured{flex:1 1 320px;width:auto}
  .blog-list{flex:1 1 320px}

  .wpb-rail{flex:1 1 260px;width:auto;max-width:400px}
  .wpb-spot{flex:1 1 340px}
}

}