/* Fonts (self-hosted, same files as the original site) */
@font-face {
  font-family: "Lexend Giga";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(assets/fonts/PlI5Fl67Mah5Y8yMHE7lkWxMvcGAfA.woff2) format("woff2");
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Lexend Giga";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(assets/fonts/PlI5Fl67Mah5Y8yMHE7lkWxNvcGAfA.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Lexend Giga";
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url(assets/fonts/PlI5Fl67Mah5Y8yMHE7lkWxDvcE.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cal Sans Flex";
  src: url(assets/fonts/kdliapohP33wkVIEBqmwrJyR8xg.woff2) format("woff2");
  font-display: swap;
  font-weight: 400;
}
@font-face {
  font-family: "Cal Sans";
  src: url(assets/fonts/jpc4BkOSsvwQVukmyq4YR1oQuDA.woff2) format("woff2");
  font-display: swap;
  font-weight: 400;
}

:root {
  --bg: rgb(255, 254, 250);
  --ink: rgb(17, 17, 17);
  --muted: rgba(0, 0, 0, 0.54);
  --line: rgba(0, 0, 0, 0.11);
  --accent: #ff4600;
  --accent: color(display-p3 1 0.275 0);
  --font-display: "Cal Sans Flex", "Cal Sans", Arial, sans-serif;
  --font-body: "Cal Sans", Arial, sans-serif;
  --font-label: "Lexend Giga", Arial, sans-serif;
}

/* Cal Sans Flex axis settings used by the original */
.brand,
.intro,
.job-company {
  font-variation-settings: "GEOM" 94, "SHRP" 0, "YTAS" 800, "ital" 0, "opsz" 42, "wght" 700;
  font-feature-settings: "ss01", "ss10", "ss11", "ss13";
}
.job-role {
  font-variation-settings: "GEOM" 100, "SHRP" 0, "YTAS" 720, "ital" 0, "opsz" 8, "wght" 518;
}
.job-desc p {
  font-variation-settings: "GEOM" 100, "SHRP" 0, "YTAS" 720, "ital" 0, "opsz" 22, "wght" 487;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h3, h5, p { margin: 0; }

.page {
  position: relative;
  left: 7px; /* the original sits 7px right of center below 1568px */
  width: min(1044px, calc(100% - 66px));
  margin: 0 auto;
  padding: 72px 0 157px;
}

/* Header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 48px;
}

.brand {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.2px;
  color: var(--accent);
  white-space: pre;
}

.social {
  display: flex;
  gap: 18px;
  padding-top: 7px;
}

.social a {
  display: block;
  width: 24px;
  height: 24px;
  color: #000;
}

.social svg {
  display: block;
  width: 24px;
  height: 24px;
}

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

/* Intro */
.intro {
  margin: 48px 0;
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.5px;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Labels */
.label {
  font-family: var(--font-label);
  font-size: 14px;
  font-weight: 300;
  line-height: 23px;
  color: var(--muted);
  text-transform: uppercase;
  white-space: pre-wrap;
}

.section-title {
  margin: 48px 0 16px;
}

/* Jobs */
.job { position: relative; }

.job--waze { margin-top: 64px; }
.job--waze .label { margin-bottom: 40px; }
.job--waze .job-role { margin-top: 50px; }
.job--waze .job-desc { margin-top: 40px; }

.job--google { margin-top: 64px; }
.job--google .label { margin-bottom: 10px; }
.job--google .job-role { margin-top: 41px; }
.job--google .job-desc { margin-top: 39px; }

.job-card {
  border-left: 8px solid var(--line);
  padding-left: 20px;
}

.job-company {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.5px;
  color: var(--ink);
  white-space: pre;
}

.job-role {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--muted);
  text-transform: uppercase;
  white-space: pre-wrap;
}

.job-desc p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: var(--ink);
  white-space: pre-wrap;
}

/* Small decorative mark present under the Waze entry on the original */
.job-dot {
  width: 1px;
  height: 3px;
  margin-top: 64px;
  background: rgb(255, 97, 97);
}

/* Wide layout (matches the original's 1568px breakpoint) */
@media (min-width: 1568px) {
  .page { left: 0; width: 1016px; padding: 96px 0 97px; }
  .header { margin-bottom: 64px; }
  .intro { margin: 64px 0; }
  .section-title { margin-top: 64px; }
  .intro,
  .job-company { font-size: 40px; }
  .social { gap: 24px; }
  .social a,
  .social svg { width: 25px; height: 25px; }
  .job-card { padding-left: 24px; }
  .job--waze .job-role { margin-top: 40px; }
  .job--waze .job-desc { margin-top: 40px; }
  .job--google .job-role { margin-top: 40px; }
}