:root{
  --ink:#1B2430;
  --ink-soft:#3A4457;
  --paper:#FAF9F5;
  --paper-dim:#F0EEE7;
  --line:#D9D5C9;
  --stamp:#B5432C;
  --stamp-dark:#8F3220;
  --teal:#3F7C74;
  --teal-dark:#2E5B55;
  --radius:2px;
}
*{box-sizing:border-box;}
body{margin:0;}
html,body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
}
::selection{background:var(--stamp);color:#fff;}

header{
  border-bottom:2px solid var(--ink);
  padding:18px 28px 16px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
}
.brand{
  font-family:'Oswald',sans-serif;
  font-weight:600;
  font-size:22px;
  letter-spacing:0.02em;
  text-transform:uppercase;
  display:flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  color:var(--ink);
}
.brand .mark{
  display:inline-block;
  background:var(--ink);
  color:var(--paper);
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  padding:3px 7px;
  letter-spacing:0.08em;
}
.brand .sub{
  font-family:'IBM Plex Mono',monospace;
  font-weight:400;
  text-transform:none;
  font-size:12px;
  color:var(--ink-soft);
  letter-spacing:0;
}
header nav{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  letter-spacing:0.03em;
}
header nav a{
  color:var(--ink-soft);
  text-decoration:none;
  margin-left:16px;
}
header nav a:hover{color:var(--stamp);}

main{
  max-width:760px;
  margin:0 auto;
  padding:48px 28px 64px;
}
h1{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:30px;
  margin:0 0 8px;
}
h2{
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.03em;
  font-size:17px;
  margin:34px 0 10px;
  display:flex;
  align-items:center;
  gap:8px;
}
h2::before{
  content:"";
  width:8px; height:8px;
  background:var(--stamp);
  display:inline-block;
}
.updated{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--ink-soft);
  margin-bottom:28px;
}
p{margin:0 0 14px; color:var(--ink-soft);}
p strong{color:var(--ink);}
a{color:var(--stamp);}
ul{color:var(--ink-soft); padding-left:20px;}
li{margin-bottom:6px;}
.card{
  background:var(--paper-dim);
  border:1px solid var(--line);
  padding:20px 22px;
  margin:24px 0;
}
.btn{
  display:inline-block;
  font-family:'Oswald',sans-serif;
  text-transform:uppercase;
  letter-spacing:0.04em;
  font-size:13px;
  padding:11px 20px;
  border:1px solid var(--ink);
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  border-radius:var(--radius);
  margin-top:8px;
}
.btn:hover{background:var(--stamp); border-color:var(--stamp-dark);}

footer{
  text-align:center;
  padding:22px 16px;
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--ink-soft);
  border-top:1px solid var(--line);
  background:var(--paper-dim);
}
.footer-inner{
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:16px;
}
.footer-links a{
  color:var(--ink);
  text-decoration:none;
  letter-spacing:0.03em;
}
.footer-links a:hover{color:var(--stamp); text-decoration:underline;}

@media (max-width:560px){
  header{padding:14px 16px 12px;}
  .brand{font-size:18px;}
  .brand .sub{display:none;}
  header nav a{margin-left:10px;}
  main{padding:32px 18px 48px;}
  h1{font-size:24px;}
}