@import url("tokens.css");

/* Ashraellen — shared stylesheet for the research/notes and research/position page type */

*{box-sizing:border-box}
html,body{height:100%}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "Liberation Sans", sans-serif;
  background:var(--bg);
  color:var(--fg);
}

a{
  color:var(--fg);
  text-decoration:none;
  border-bottom:1px solid rgba(242,242,244,.25);
}
a:hover{border-bottom-color:rgba(242,242,244,.55)}

.wrap{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 24px;
}

.card{
  max-width:560px;
  width:100%;
  padding:36px 40px;
  border:1px solid var(--line);
  border-radius:18px;
  background:rgba(255,255,255,.02);
}

.brand{
  font-size:var(--fs-kicker);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 18px;
  line-height:var(--lh-kicker);
}

.card h1{
  margin:0 0 16px;
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
  font-size:var(--fs-h1-static);
  line-height:1.15;
}

.card p{
  margin:0 0 12px;
  color:var(--muted);
  line-height:var(--lh-body);
  font-size:var(--fs-body);
}

/* Position statement extension; Notes pages do not use these elements/classes. */
.card h2{
  margin:26px 0 10px;
  font-size:var(--fs-h2);
  line-height:1.2;
  font-weight:600;
}

.position-statement{
  max-width:760px;
}

.position-statement .lead{
  font-size:var(--fs-lead);
  line-height:var(--lh-lead);
}

.card hr{
  margin:22px 0;
  border:none;
  border-top:1px solid var(--line);
}

.sub{
  display:flex;
  gap:16px;
  font-size:var(--fs-kicker);
  line-height:var(--lh-kicker);
}
.sub a{border-bottom-color:rgba(242,242,244,.18)}
.sub a:hover{border-bottom-color:rgba(242,242,244,.55)}

@media(max-width:560px){
  .card{padding:28px 22px}
}