/* ─── Design tokens ─────────────────────────────────────────────────────── */

:root {
  --color-black:        #000;
  --color-foreground:   black;
  --color-background:   white;
  --color-accent-hover: #51b124;
  --color-text-soft:    #333333;
  --color-text-mute:    #6a6a6a;
  --color-border:       #000000;
  --color-border-row:   #c8c8c8;

  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --layout-max:     920px;
  --layout-pad-h:   32px;
  --layout-pad-top: 72px;
}

/* ─── Base ──────────────────────────────────────────────────────────────── */

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

body {
  font-family: var(--font-mono);
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-foreground);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a:hover {
  color: var(--color-accent-hover);
}

::selection {
  background-color: #51ff0080;
  color: var(--color-black);
}

/* ─── Layout ────────────────────────────────────────────────────────────── */

main {
  max-width: var(--layout-max);
  margin-inline: auto;
  padding: var(--layout-pad-top) var(--layout-pad-h) 40px;
}

hr.rule {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: 28px;
}

/* ─── Typography ────────────────────────────────────────────────────────── */

h1.name,
h2.sec {
  font-family: var(--font-mono);
  font-weight: 400;
  font-style: italic;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-top: 0;
  margin-bottom: 2rem;
}

p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 22px;
}

/* ─── Experience ────────────────────────────────────────────────────────── */

.exp {
  list-style: none;
}

.exp li {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 18px;
  align-items: baseline;
  padding-block: 10px;
  border-bottom: 1px dashed var(--color-border-row);
  font-size: 16px;
}

.exp li:last-child {
  border-bottom: none;
}

.exp .role {
  font-weight: 700;
}

.exp .where {
  color: var(--color-text-soft);
  margin-left: 8px;
  text-decoration: none;
}

.exp .where:hover {
  color: var(--color-accent-hover);
}

.exp .year {
  color: var(--color-text-mute);
  white-space: nowrap;
}

/* ─── Projects ──────────────────────────────────────────────────────────── */

.projects {
  list-style: none;
}

.projects li {
  margin-bottom: 22px;
}

.projects li:last-child {
  margin-bottom: 0;
}

.projects .title {
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
}

.projects .title:hover {
  color: var(--color-accent-hover);
}

.projects .meta {
  color: var(--color-text-mute);
  margin-left: 8px;
  font-size: 16px;
  white-space: nowrap;
}

.projects .desc {
  display: block;
  margin-top: 2px;
  font-size: 16px;
  line-height: 1.65;
}

.projects .stack {
  display: block;
  margin-top: 1px;
  font-family: var(--font-mono);
  color: var(--color-text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.projects .stack::before {
  content: '// ';
  color: var(--color-text-mute);
}

/* ─── Contact ───────────────────────────────────────────────────────────── */

.contact {
  font-size: 16px;
  margin-block: 4px;
}

.contact a {
  margin-right: 18px;
}

/* ─── Signature highlight ───────────────────────────────────────────────── */

.hl {
  padding-bottom: 6px;
  background-image:
    linear-gradient(to right, rgb(194, 255, 174), rgb(154, 255, 124)),
    linear-gradient(to right, #fefffe, #c5ffb4);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%, 0 0;
  background-size: 100% 5px, 100% 100%;
}

/* ─── Reveal animation ──────────────────────────────────────────────────── */

.rv {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity   0.7s cubic-bezier(0.2, 0.7, 0.2, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0ms);
}

body.ready .rv {
  opacity: 1;
  transform: none;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  main {
    padding: 44px 20px 32px;
  }
}