/* ============================================================
   Asma Irfan · BASE
   Reset, element defaults, and the three type roles that every
   page composes from. No components here.
   ============================================================ */
@layer base{

/* ---------- reset ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html:focus-within{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;border:none;background:none;cursor:pointer;color:inherit}
ul{list-style:none}
[hidden]{display:none!important}
section{scroll-margin-top:88px}
::selection{background:var(--clay-light);color:var(--ink)}
:focus-visible{outline:2px solid var(--clay-deep);outline-offset:3px;border-radius:4px}

/* ============================================================
   TYPE ROLES
   Three roles, and the rule that governs all of them:
   italic + clay is the emotional beat of a sentence. Every
   heading is a roman setup followed by one italic clay phrase
   that turns it. Break that and the site stops sounding
   like itself.
   ============================================================ */

.h2{
  font-family:var(--serif);
  font-weight:400;
  font-size:var(--fd-xl);
  line-height:1.16;
  letter-spacing:-.005em;
}
.h2 em{font-style:italic;color:var(--clay)}
/* on ink and clay bands the beat flips to the light accent */
.dark .h2 em, .h2 .em-light{color:var(--clay-light)}

.lead{
  font:400 var(--fd-lead)/1.62 var(--sans);
  color:var(--dim);
  max-width:var(--measure-lead);
}

/* the aside the formal register cannot make */
.hand{
  font:400 var(--fd-hand)/1.22 var(--hand);
  color:var(--clay-deep);
}

}