/* ============================================================
   Asma Irfan · PRIMITIVES
   ------------------------------------------------------------
   The design language, encoded ONCE each. Everything in here
   was previously re-authored by hand at every use site:

     .kicker    replaced 14 hand-written label styles
     .rule-list replaced  9 hand-written ruled lists
     .panel     replaced  5 hand-written card surfaces
     .split     replaced  6 hand-written two-column rows
     .lift      replaced  3 hover behaviours

   Adding a new section should mean composing these, not
   writing new CSS.
   ============================================================ */
@layer primitives{

/* ============================================================
   LABELS - two roles, deliberately different sizes.
   .eyebrow = section-level  ·  .kicker = component-level
   ============================================================ */
.eyebrow{
  font-family:var(--sans);
  font-weight:600;
  font-size:11.5px;
  line-height:1;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--e-color,var(--muted));
}
.eyebrow--clay{--e-color:var(--clay-deep)}
.eyebrow--light{--e-color:var(--clay-light)}   /* on ink  */
.eyebrow--onclay{--e-color:var(--on-clay-dim)} /* on clay */

.kicker{
  font-family:var(--sans);
  font-weight:var(--k-weight,600);
  font-size:var(--k-size,var(--fs-2xs));
  line-height:var(--k-lh,1);
  letter-spacing:var(--k-track,.22em);
  color:var(--k-color,var(--muted));
  text-transform:uppercase;
}
.kicker--clay{--k-color:var(--clay-deep)}
.kicker--sm{--k-size:var(--fs-3xs)}
.kicker--lg{--k-size:11.5px}
.kicker--loose{--k-track:.24em}
.kicker--tight{--k-track:.18em}
.kicker--wrap{--k-lh:1.6}      /* when the label may wrap */
.kicker--mixed{text-transform:none}

/* ============================================================
   RULE-LIST - the dominant layout primitive on this site.
   Hairline under every row, hairline above the first. Facts
   in a list get rules; only a discrete OBJECT gets a panel.
   ============================================================ */
.rule-list{--rule:var(--hairline)}
.rule-list > *{
  padding-block:var(--row-y,var(--sp-4));
  border-bottom:1px solid var(--rule);
}
.rule-list > *:first-child{border-top:1px solid var(--rule)}
.rule-list--dark{--rule:var(--hairline-dark)}  /* on ink bands */

/* ============================================================
   PANEL - reserved for things that represent a document or
   artifact: a message, a citation, a transcript, a reply.
   ============================================================ */
.panel{
  background:var(--p-bg,var(--white));
  border:1px solid var(--p-border,var(--hairline-soft));
  border-radius:var(--radius-panel);
  padding:var(--p-pad,var(--sp-8));
  box-shadow:var(--p-shadow,var(--shadow-panel));
}
.panel--flat{--p-shadow:none}
.panel--float{--p-shadow:var(--shadow-float);--p-border:transparent}
.panel--sand{--p-bg:var(--sand);--p-border:transparent;--p-shadow:none}

/* the one hover behaviour on the site */
.lift{transition:transform var(--dur-fast) var(--ease-out),
                 box-shadow var(--dur-fast) var(--ease-out)}
.lift:hover{transform:translateY(var(--lift));box-shadow:var(--shadow-lift)}

/* ============================================================
   SPLIT - the signature meter. A fixed label/panel column
   against a fluid one, collapsing at the single breakpoint.
   ============================================================ */
.split{display:flex;gap:var(--split-gap);align-items:var(--split-align,center)}
.split--stretch{--split-align:stretch}
.split--top{--split-align:flex-start}
.split--tight{--split-gap:var(--sp-6)}
.split-fluid{flex:1;min-width:0}

@media (max-width:900px){
  .split{flex-direction:column;--split-align:stretch;--split-gap:var(--sp-7)}
}

/* ============================================================
   BANDS - vertical rhythm comes from ground colour, not
   whitespace. The same band never repeats back to back.
   ============================================================ */
.section{padding:var(--section-y) var(--edge)}
/* for bands whose content does not fill the standard rhythm -
   otherwise a short section reads as mostly padding */
.section--tight{padding-block:clamp(44px,5.2vw,76px)}
.band-white{background:var(--white)}
.band-sand{background:var(--sand)}
.band-ink{background:var(--ink);color:var(--on-dark)}
.band-clay{background:var(--clay-band);color:var(--on-clay)}

/* META RUN - a list of standing facts, not a sentence.
   One flowing run with mid-dots, wrapping as needed. Each phrase is
   nowrap, so a break can only ever land on a separator: the run
   reflows without ever splitting "Rawalpindi & Online" across two
   lines, which is what it did as plain text. */
.meta-run{display:flex;flex-wrap:wrap;gap:.25em .55em}
.meta-run > span{white-space:nowrap}
/* the separator rides with the phrase it follows rather than being
   positioned into the gap, so it cannot collide with the next one
   whatever the tracking is */
.meta-run > span:not(:last-child)::after{
  content:"·";margin-left:.5em;opacity:.5;
}


.section-head{margin-bottom:clamp(26px,3vw,44px)}
.section-head .h2{margin-top:clamp(16px,1.8vw,26px)}
.section-head .lead{margin-top:var(--sp-4)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  border-radius:var(--radius-pill);
  font:600 15px/1 var(--sans);
  padding:var(--btn-pad);
  transition:transform var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             background var(--dur-fast);
  will-change:transform;
}
.btn--primary{background:var(--clay);color:#fff;box-shadow:var(--shadow-cta)}
.btn--primary:hover{transform:translateY(var(--lift-sm));background:var(--clay-deep);box-shadow:var(--shadow-cta-hover)}
.btn--primary:active{transform:translateY(0)}
.btn--ghost{border:1px solid rgba(46,37,28,.15);color:var(--ink)}
.btn--ghost:hover{border-color:rgba(46,37,28,.32);transform:translateY(var(--lift-sm))}
.btn--onclay{background:var(--on-clay);color:var(--clay-deep);box-shadow:none}
.btn--onclay:hover{transform:translateY(var(--lift-sm))}

.microline{font:500 14px/1.5 var(--sans);color:var(--muted)}
a.microline{border-bottom:1px solid rgba(156,141,124,.4);transition:color .15s,border-color .15s}
a.microline:hover{color:var(--clay-deep);border-color:var(--clay-deep)}

/* ============================================================
   MOTION - printed content settles first, handwriting arrives
   --hand-delay later, and nothing ever replays.
   ============================================================ */
[data-reveal]{
  opacity:0;transform:translateY(12px);
  transition:opacity var(--dur) var(--ease-out),
             transform var(--dur) var(--ease-out);
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}

/* handwriting: a wipe, always a beat behind the print */
.hand-note{opacity:0;clip-path:inset(0 100% 0 0);transition:none}
.in .hand-note, .hand-note.in{
  opacity:1;clip-path:inset(0 -4% 0 0);
  transition:clip-path .7s var(--ease-out) var(--hand-delay),
             opacity .1s linear var(--hand-delay);
}
.hand-arrow path{stroke-dasharray:120;stroke-dashoffset:120}
.in .hand-arrow path, .hand-arrow.in path{
  animation:draw .6s var(--ease-out) calc(var(--hand-delay) + .05s) forwards;
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{to{opacity:1;transform:none}}

}

/* ============================================================
   REDUCED MOTION - everything static, at its final state.
   Lives in the FIRST layer so its !important beats every
   later layer (important declarations invert layer order).
   ============================================================ */
@layer a11y{
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-delay:0ms!important;
    transition-duration:.01ms!important;transition-delay:0ms!important;
  }
  [data-reveal]{opacity:1!important;transform:none!important}
  .hand-note{opacity:1!important;clip-path:none!important}
  .hand-arrow path{stroke-dashoffset:0!important}
  .cost-circle ellipse{stroke-dashoffset:0!important}
  .hero [data-stage]{opacity:1!important;transform:none!important;animation:none!important}
  .tl-spine{transform:scaleY(1)!important}
  .ft-arrow,.tl-bubble{transform:none!important}
  .ft-to,.faq-a,.prop-rest{opacity:1!important;transform:none!important}
  .caret{animation:none!important}
}
}