:root {
  --bg: #F7F5F0;
  --card: #FFFFFF;
  --ink: #1C1B19;
  --mute: #6F6B64;
  --line: #D9D4CA;
}
:root[data-theme="dark"] {
  --bg: #161513;
  --card: #1F1D1B;
  --ink: #ECE8E0;
  --mute: #9A958C;
  --line: #34312D;
}

html, body { margin: 0; height: 100%; }
body { -webkit-font-smoothing: antialiased; background: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .6; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, p { margin: 0; font: inherit; }

.page {
  min-height: 100vh;
  box-sizing: border-box;
  padding: 48px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', sans-serif;
  transition: background-color .4s ease, color .4s ease;
}
.wrap { width: 100%; max-width: 540px; display: flex; flex-direction: column; gap: 20px; }

/* Header */
.top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.name {
  font-family: 'Instrument Serif', serif;
  font-size: 56px;
  line-height: 1;
  letter-spacing: -.005em;
  -webkit-text-stroke: 1.1px currentColor;
}
.langs { display: flex; gap: 14px; font-size: 13px; }
.langs button { color: var(--mute); }
.langs button.is-active { color: var(--ink); }

/* Intro */
.intro-block { display: flex; flex-direction: column; gap: 2px; }
.intro { font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--mute); text-wrap: pretty; }
.based { font-size: 15px; line-height: 1.5; color: var(--mute); }

/* Projects */
.projects { display: flex; flex-direction: column; gap: 10px; }
.projects-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--mute); }
#next { color: var(--ink); }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 150px;
  box-sizing: border-box;
  transition: background-color .4s ease;
}
.card-inner { display: flex; flex-direction: column; gap: 14px; opacity: 1; transition: opacity .35s ease; }
.card-inner.is-hidden { opacity: 0; }
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.p-name {
  font-family: 'Instrument Sans', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.p-link {
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: -1px;
  border: 1px solid var(--line);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  box-sizing: content-box;
}
.p-desc {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.35;
  color: var(--mute);
  text-wrap: pretty;
}

/* Lists */
.lists { display: flex; flex-direction: column; gap: 20px; margin-top: 4px; }
.list { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.5; }
.list-title { font-size: 13px; color: var(--mute); margin-bottom: 6px; }
.item { display: flex; gap: 10px; align-items: baseline; }
.dot { color: var(--mute); }

.rule { height: 1px; background: var(--line); margin: 8px 0; }

/* Footer */
.foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 14px; }
.themes { display: flex; gap: 2px; }
.theme-btn { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--mute); }
:root:not([data-theme="dark"]) #set-light,
:root[data-theme="dark"] #set-dark { color: var(--ink); }
.contact { display: flex; align-items: center; gap: 14px; }
.touch { color: var(--mute); }
.sep { width: 1px; height: 14px; background: var(--line); }