/* Design tokens taken from the Figma file */
:root {
  --bg: #eee0d7;
  --ink: #563e3e;        /* headings */
  --rose: #9b6868;       /* body + nav */
  --card-bg: #f1f0f0;
  --card-border: #dcd2d2;
  --receipt-red: #c95a43; /* backdrop behind the receipt image */
}

/* Iosevka Charon (nav). Drop the font file into /assets and uncomment to use it exactly:
@font-face {
  font-family: "Iosevka Charon";
  src: url("assets/IosevkaCharon-Regular.woff2") format("woff2");
  font-weight: 400;
}
*/

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  background: var(--bg);
  color: var(--rose);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 21.6px;
  line-height: normal;
  min-height: 100vh;
}

/* ---------- nav ---------- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 36px 50.4px 0 43.2px;
  font-family: "Iosevka Charon", "Iosevka", "Iosevka Term", ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 28.8px;
  color: var(--rose);
}
.nav a { color: inherit; text-decoration: none; }
.nav a:hover,
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5.4px; }
.nav-links { display: flex; gap: 21.6px; }

/* ---------- shared type ---------- */
h1 {
  margin: 0;
  font-size: 58.5px;
  font-weight: 700;
  color: var(--ink);
}
h2 {
  margin: 0;
  font-size: 27px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: underline;
  text-underline-position: from-font;
}
p { margin: 0; }

/* ---------- about ---------- */
.about { padding: 184.5px 21.6px 72px 171px; }
.about .tagline { margin-top: 8.1px; }
.about .up-to { margin: 24.3px 0 0 0; }
.about .previously { margin: 29.7px 0 0 4.5px; }
.about ul { margin: 8.1px 0 0; padding: 0; }
.about ul li { margin-left: 32.4px; list-style: disc; }
.about ul.now { margin-left: -4.5px; }
.about ul.prev { margin-top: 10.8px; }

.about-art {
  position: absolute;
  display: block;
  width: 324.9px;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* ---------- projects ---------- */
.projects { padding: 95.4px 21.6px 72px; text-align: center; }
.card {
  position: relative;
  width: 661.5px;
  max-width: 100%;
  height: 394.2px;
  margin: 30.6px auto 0;
  text-align: left;
  background: var(--card-bg);
  border: 2.7px solid var(--card-border);
  border-radius: 5.4px;
}
.card-img {
  position: absolute;
  left: 9px; top: 9px;
  width: 310.5px; height: 373.5px;
  background: var(--receipt-red);
  overflow: hidden;
}
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-title {
  position: absolute;
  left: 340.2px; top: 75.6px;
  font-size: 36px; font-weight: 700; color: var(--ink);
  white-space: nowrap;
}
.card-text { position: absolute; left: 340.2px; top: 133.2px; width: 306.9px; }
.card-text p + p { margin-top: 26.1px; }

/* ---------- blog ---------- */
.blog { padding: 82px 21.6px 72px; text-align: center; }
.blog-art {
  position: relative;
  left: 38px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 30px;
  margin-top: 54px;
  pointer-events: none;
  user-select: none;
}
.blog-art img { display: block; height: auto; }
.blog-art img:nth-child(1) { width: 306px; }
.blog-art img:nth-child(2) { width: 342.9px; }
.blog-art img:nth-child(3) { width: 317.7px; }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .blog-art { left: 0; flex-wrap: wrap; }
  .about-art { display: none; }
  .about { padding-left: 43.2px; padding-top: 126px; }
}
@media (max-width: 800px) {
  body { font-size: 18px; }
  .nav { font-size: 19.8px; padding: 21.6px 18px 0; }
  .nav-links { gap: 14.4px; }
  h1 { font-size: 39.6px; }
  h2 { font-size: 21.6px; }
  .about { padding: 81px 18px 54px; }
  .projects { padding-top: 63px; }
  .blog { padding-top: 72px; }
  .blog-art { left: 0; flex-direction: column; align-items: center; }
  .blog-art img { max-width: 100%; }
  .card { height: auto; padding: 9px; display: flex; flex-direction: column; gap: 14.4px; }
  .card-img { position: static; width: 100%; height: auto; aspect-ratio: 345 / 415; max-width: 310.5px; margin: 0 auto; }
  .card-title, .card-text { position: static; width: auto; white-space: normal; }
  .card-title { font-size: 28.8px; }
}