/* andrewfriedrichs.com — austere serif landing
   One serif does the display + body work; a small tracked sans handles
   structural labels only. No accent color: the restraint is the point. */

:root{
  --paper:#F1F0EC;
  --ink:#1A1A1C;
  --muted:#77766F;
  --rule:#D6D5CE;
  --serif:"Hoefler Text","Iowan Old Style",Charter,"Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --measure:60ch;
  --pad:clamp(24px,6vw,96px);
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;min-height:100svh;
  background:var(--paper);color:var(--ink);
  font-family:var(--serif);font-size:18px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  display:flex;flex-direction:column;
}
a{color:inherit;}
::selection{background:#1a1a1c;color:var(--paper);}

/* small tracked sans, used only for structural labels */
.label{font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;font-size:12.5px;color:var(--muted);}

/* ---------- slim persistent header (sub-pages) ---------- */
.topbar{
  display:flex;align-items:baseline;justify-content:space-between;gap:24px;
  padding:22px var(--pad);border-bottom:1px solid var(--rule);
}
.topbar .brand{font-family:var(--serif);font-size:18px;letter-spacing:.01em;text-decoration:none;}
.topbar .links{display:flex;gap:26px;}
.topbar .links a,.topbar .links span{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.14em;
  font-size:12px;text-decoration:none;color:var(--muted);
}
.topbar .links a:hover{color:var(--ink);}
.topbar .links a[aria-current="page"]{color:var(--ink);}

/* ---------- home ---------- */
.home main{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:12vh var(--pad) 9vh;max-width:1120px;width:100%;
}
.name{
  font-family:var(--serif);font-weight:400;
  font-size:clamp(46px,9.2vw,108px);line-height:.98;letter-spacing:-.012em;margin:0;
}
.lead{
  font-family:var(--serif);font-size:clamp(18px,2.1vw,22px);line-height:1.5;
  max-width:34ch;margin:30px 0 0;color:var(--ink);
}
.caesura{width:44px;height:1px;background:var(--ink);border:0;margin:46px 0 0;}
nav.primary{display:flex;flex-wrap:wrap;gap:36px;align-items:baseline;margin-top:30px;}
nav.primary a{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;
  font-size:13px;text-decoration:none;color:var(--ink);
  position:relative;padding-bottom:4px;
}
nav.primary a::after{
  content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s ease;
}
nav.primary a:hover::after{transform:scaleX(1);}
nav.primary .soon{display:inline-flex;gap:9px;align-items:baseline;}
nav.primary .soon span{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.16em;font-size:13px;color:var(--muted);
}
nav.primary .soon em{
  font-family:var(--sans);font-style:normal;text-transform:uppercase;
  letter-spacing:.11em;font-size:10px;color:var(--muted);opacity:.75;
}

/* ---------- footer ---------- */
.foot{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap;
  padding:22px var(--pad);border-top:1px solid var(--rule);
}
.foot a,.foot .yr{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;
  font-size:12.5px;color:var(--muted);text-decoration:none;
}
.foot a:hover{color:var(--ink);}
.foot .yr .sep{opacity:.55;margin:0 4px;}
.foot .yr .avf{text-transform:none;}

/* ---------- generic page (about / projects) ---------- */
.page main{flex:1;padding:clamp(48px,9vw,104px) var(--pad) 84px;max-width:1120px;width:100%;}
.page .eyebrow{margin:0 0 20px;}
.page h1{
  font-family:var(--serif);font-weight:400;font-size:clamp(34px,6vw,64px);
  line-height:1.02;letter-spacing:-.01em;margin:0;
}

.prose{max-width:var(--measure);margin-top:36px;font-size:19px;line-height:1.62;}
.prose p{margin:0 0 1.15em;}
.prose p:last-child{margin-bottom:0;}
.prose a{text-decoration:none;border-bottom:1px solid var(--rule);padding-bottom:1px;}
.prose a:hover{border-color:var(--ink);}
.prose .contact{margin-top:44px;}

/* ---------- projects: austere hairline card grid ---------- */
.grid{
  margin-top:52px;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.card{background:var(--paper);padding:34px 32px 36px;display:flex;flex-direction:column;min-height:236px;}
.card .idx{font-family:var(--sans);font-size:12px;letter-spacing:.16em;color:var(--muted);}
.card h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3vw,32px);line-height:1.05;margin:16px 0 12px;}
.card p{margin:0;color:var(--muted);font-size:16px;line-height:1.5;}
.card .tag{margin-top:auto;padding-top:26px;font-family:var(--sans);text-transform:uppercase;letter-spacing:.13em;font-size:11.5px;color:var(--muted);}

@media (prefers-reduced-motion:reduce){
  nav.primary a::after{transition:none;}
}