:root {
  --ink: #000;
  --muted: #b8b3b0;
  --bg: #fff;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--bg);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 22px;
  line-height: 1.5;
  letter-spacing: -0.02em;
  padding: 72px 76px 72px 82px;
}

a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.muted { color: var(--muted); }

.logo img { display: block; width: 216px; height: auto; }

.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 34px;
  padding: 28px 0;
}

.portrait { position: relative; flex: none; }

.portrait-photo {
  display: block;
  width: 256px;
  height: 342px;
  object-fit: cover;
  border-radius: 24px;
}

.portrait-flower {
  position: absolute;
  width: 84px;
  left: -32px;
  bottom: -18px;
}

.intro-text { max-width: 520px; padding-top: 16px; }

h1 {
  font-size: 28px;
  font-weight: 400;
  line-height: 1.15;
  margin-bottom: 44px;
}

h1 .muted { display: block; font-size: 22px; letter-spacing: 0; margin-top: 2px; }

.projects { list-style: none; margin-top: 82px; }

.projects a { font-weight: 700; font-style: italic; }
.projects .muted a { font-weight: 400; }

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 18px;
  font-size: 20px;
}

@media (max-width: 760px) {
  body { padding: 32px 16px; font-size: 18px; }
  .logo img { width: 160px; }
  .intro { flex-direction: column; align-items: flex-start; padding: 40px 0; }
  .portrait-photo { width: 220px; height: 294px; }
  .portrait-flower { width: 72px; left: -16px; }
  .intro-text { padding-top: 0; max-width: 100%; }
  h1 { font-size: 24px; margin-bottom: 24px; }
  h1 .muted { font-size: 18px; }
  .projects { margin-top: 32px; }
  .site-footer nav { justify-content: flex-start; font-size: 18px; }
}