/* main style */
/* no frameworks were harmed in the making of this website */

/* Geist font, self-hosted */
@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Geist Mono';
  src: url('../fonts/GeistMono-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg-color: #0e1012;
  --line-color: #1f2426;
  --border-color: #2a2f31;
  --text-color: #e6e9e7;
  --text-soft: #c4cac7;
  --text-gray: #9aa19e;
  --text-dark: #6b726f;
  --primary-color: oklch(82% 0.12 185);

  /* path columns: year | study lane | work lane */
  --year-width: 84px;
  --lane-width: 44px;
}

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

/* layout */
body {font-family: 'Geist', sans-serif; font-size: 15px; color: var(--text-color); background-color: var(--bg-color); -webkit-font-smoothing: antialiased;
  background-image: linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size: 32px 32px;}
.layout {max-width: 1080px; margin: auto; padding: 64px 40px; display: grid; grid-template-columns: 300px 1fr; grid-template-rows: 1fr auto; column-gap: 72px; align-items: start;}
aside {position: sticky; top: 40px;}
main {min-width: 0;}
section {margin-bottom: 56px;}

a {color: var(--text-color); text-decoration: none;}
a:hover {color: var(--primary-color);}
::selection {background: var(--primary-color); color: var(--bg-color);}

h1 {font-weight: 500; font-size: 40px; line-height: 1.02; letter-spacing: -0.03em; margin-bottom: 10px;}
h2 {font-family: 'Geist Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dark);
  border-bottom: 1px solid var(--line-color); padding-bottom: 12px; margin-bottom: 18px;}
h3 {font-weight: 400;}

/* logo with blinking cursor (typing is in main.js) */
#logo {font-family: 'Geist Mono', monospace; font-size: 20px; height: 28px; cursor: default;}
#typed {color: var(--text-gray);}
.cursor {color: var(--primary-color);}
@media (prefers-reduced-motion: no-preference) {.cursor {animation: blink 1.1s steps(1) infinite;}}
@keyframes blink {50% {opacity: 0;}}

#photo {display: block; width: 76px; height: 76px; border-radius: 14px; object-fit: cover; object-position: 50% 38%; margin: 40px 0 22px; box-shadow: 0 0 0 1px rgba(255,255,255,.1);}
.intro {color: var(--text-gray); line-height: 1.5; margin-bottom: 22px;}

/* contact info */
dl.info {border-top: 1px solid var(--line-color); padding-top: 20px; margin-bottom: 22px;}
dl.info dt {font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dark); margin-bottom: 3px;}
dl.info dd {font-size: 14px; color: var(--text-soft); margin-bottom: 12px; overflow-wrap: anywhere;}

.button {display: flex; justify-content: space-between; font-family: 'Geist Mono', monospace; font-size: 13px; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 10px; padding: 14px 16px; transition: .15s;}
.button:hover {background: var(--primary-color); color: var(--bg-color);}


/* path: two lanes (study, work) with dots */
.lanes-head {display: flex; margin-left: var(--year-width); font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px;}
.lanes-head span {width: var(--lane-width); text-align: center; color: var(--text-gray);}
.lanes-head span + span {color: var(--primary-color);}

ul.path {list-style-type: none; position: relative;}

/* the two vertical lines */
ul.path::before, ul.path::after {content: ""; position: absolute; top: 0; bottom: 0; width: 1px;}
ul.path::before {left: calc(var(--year-width) + var(--lane-width) / 2); background: #3a4144;}
ul.path::after {left: calc(var(--year-width) + var(--lane-width) * 1.5); background: oklch(82% 0.12 185 / .4);}

ul.path li {position: relative; min-height: 68px; padding: 2px 8px 18px calc(var(--year-width) + var(--lane-width) * 2 + 12px); border-radius: 8px;}
ul.path li:hover {background: rgba(255,255,255,.025);}
ul.path time {position: absolute; left: 4px; top: 7px; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-dark);}
ul.path h3 {font-size: 17px; letter-spacing: -0.01em; margin-bottom: 4px;}
ul.path p {font-size: 13px; line-height: 1.45; color: var(--text-dark);}
ul.path p.org {color: var(--text-gray); margin-bottom: 4px;}
ul.path h3 .note {font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-dark); margin-left: 6px;}
ul.path h3 .note::before {content: "/ "; color: var(--border-color);}

/* the dot */
ul.path li::before {content: ""; position: absolute; top: 9px; width: 11px; height: 11px; border-radius: 50%; background: var(--bg-color); border: 1.5px solid var(--text-gray); z-index: 1;}
ul.path li.study::before {left: calc(var(--year-width) + var(--lane-width) / 2 - 5px);}
ul.path li.work::before {left: calc(var(--year-width) + var(--lane-width) * 1.5 - 5px);}

/* still going on */
ul.path li.now::before {background: var(--primary-color); border: none; animation: pulse 2.4s ease-out infinite;}
ul.path li.now time {color: var(--primary-color);}
ul.path li.now h3::after {content: "now"; display: inline-block; font-family: 'Geist Mono', monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; vertical-align: 3px;
  color: var(--bg-color); background: var(--primary-color); border-radius: 99px; padding: 2px 7px; margin-left: 10px;}
@keyframes pulse {
  0% {box-shadow: 0 0 0 0 oklch(82% 0.12 185 / .5);}
  100% {box-shadow: 0 0 0 8px oklch(82% 0.12 185 / 0);}
}

/* dashed line between current and past, automatically */
ul.path li.now + li:not(.now) {border-top: 1px dashed var(--border-color); border-radius: 0 0 8px 8px;}


/* skills */
.skill-group {display: grid; grid-template-columns: var(--year-width) 1fr; gap: 12px; align-items: baseline; margin-bottom: 14px;}
.skill-group h3 {font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--text-dark); padding-left: 4px;}
ul.tags {list-style-type: none; display: flex; flex-wrap: wrap; gap: 8px;}
ul.tags li {font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--text-soft); border: 1px solid var(--border-color); border-radius: 99px; padding: 6px 11px; white-space: nowrap; transition: .15s;}
ul.tags li:hover {border-color: oklch(82% 0.12 185 / .6); color: var(--text-color);}

footer {grid-column: 1 / -1; margin-top: 20px; font-family: 'Geist Mono', monospace; font-size: 11px; color: #4a5255; border-top: 1px solid var(--line-color); padding-top: 16px;}


/* responsive modification */
/* tablet: sidebar goes on top */
@media (max-width: 860px) {
  .layout {grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; padding: 40px 24px;}
  aside {position: static; max-width: 420px; margin-bottom: 48px;}
}

/* phones */
@media (max-width: 480px) {
  :root {--year-width: 64px; --lane-width: 30px;}
  .layout {padding: 28px 18px;}
  h1 {font-size: 34px;}
  ul.path time {font-size: 10px;}
  .lanes-head {font-size: 8px; letter-spacing: .05em;}
  .skill-group {grid-template-columns: 1fr; gap: 8px;}
}

/* if you are still reading, you are either a recruiter or my teacher. hi both. */