/* Free, legal fonts close to Monument/Diatype look */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root{
  --fg-85: rgba(0,0,0,0.85);
  --fg-75: rgba(0,0,0,0.75);
  --fg-60: rgba(0,0,0,0.60);
  --fg-40: rgba(0,0,0,0.40);
  --fg-25: rgba(0,0,0,0.25);
  --accent: rgba(255,0,0,0.75);
  --maxw: 72ch;
  --pad: 2rem;
}

/* Base */
html,body{margin:0;padding:0}
body{
  color:var(--fg-75);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height:1.55;
  background:#fff;
}

/* Containers */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:var(--pad);
}

/* Top line: name left, location right */
.topline{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:1rem;
  padding-top:calc(var(--pad) * 0.75);
}
.name{
  font-family:"IBM Plex Mono", Consolas, monospace;
  font-weight:400;
  font-size:clamp(1.25rem, 2.2vw, 1.75rem);
  color:var(--fg-85);
}
.location{
  font-family:"IBM Plex Mono", Consolas, monospace;
  color:var(--fg-60);
  font-size:clamp(1rem, 1.8vw, 1.25rem);
}

/* Body copy (mono-ish vibe like your screenshot) */
.bodycopy{
  font-family:"IBM Plex Mono", Consolas, monospace;
  font-weight:400;
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  line-height:1.6;
  color:var(--fg-75);
}
.bodycopy strong{ color:var(--fg-85); }

/* Headings */
h2{
  margin:1.75rem 0 .75rem;
  font:500 clamp(1.25rem, 2.5vw, 1.65rem)/1.3 Inter, system-ui, sans-serif;
  color:var(--fg-75);
}

/* Links */
a{ color:var(--accent); text-decoration:underline; }
a:hover{ color:#0fa583; }

/* Links block */
.links{
  font-family:"IBM Plex Mono", Consolas, monospace;
  font-size:clamp(.95rem, 1.6vw, 1rem);
  line-height:1.4;
}

/* Divider similar to your dotted rule */
hr{
  height:1px;
  border:none;
  background-image:linear-gradient(to right, rgba(0,0,0,.25) 60%, rgba(255,255,255,0) 0%);
  background-size:9px 1px;
  background-repeat:repeat-x;
  margin:2rem 0;
}

/* Small-screen polish */
@media (max-width:700px){
  .topline{flex-direction:column; gap:.25rem;}
  .location{align-self:flex-start;}
}