/* ────────────────────────────────────────────────
   PP Neue Machina (Free for Personal Use)
   Two families: Plain (default) and Inktrap (slabbed cuts).
   Weights: 300 = Light, 400 = Regular, 800 = Ultrabold.
   ──────────────────────────────────────────────── */
@font-face {
  font-family: "PP Neue Machina";
  src: url("fonts/PPNeueMachina-PlainLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("fonts/PPNeueMachina-PlainLightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("fonts/PPNeueMachina-PlainRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("fonts/PPNeueMachina-PlainRegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("fonts/PPNeueMachina-PlainUltrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina";
  src: url("fonts/PPNeueMachina-PlainUltraboldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("fonts/PPNeueMachina-InktrapLight.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("fonts/PPNeueMachina-InktrapLightItalic.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("fonts/PPNeueMachina-InktrapRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("fonts/PPNeueMachina-InktrapRegularItalic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("fonts/PPNeueMachina-InktrapUltrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PP Neue Machina Inktrap";
  src: url("fonts/PPNeueMachina-InktrapUltraboldItalic.otf") format("opentype");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  /* default view = work; life view overrides --accent + --hl-text below */
  --accent: #f8a24b;
  --hl-text: #1e1919;

  --bg: #000;
  --dark: #061e16;
  --text-light: #b4c8e1;

  --font-display: "PP Neue Machina", "Archivo Black", system-ui, sans-serif;
  --font-body: "PP Neue Machina", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-inktrap: "PP Neue Machina Inktrap", "PP Neue Machina", system-ui, sans-serif;
}

[data-view="life"] {
  --accent: #b4c8e1;
  --hl-text: #b4c8e1;
}

/* Life view drops the highlight rectangle behind bold inline words. */
[data-view="life"] .hl-bg {
  display: none;
}

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

html,
body {
  min-height: 100%;
}

body {
  background: var(--bg);
  color: var(--text-light);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* ────────────────────────────────────────────────
   Layout
   ──────────────────────────────────────────────── */
.page {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56px 280px 48px;
}

.container {
  width: 900px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 100px;
}

/* ────────────────────────────────────────────────
   Header
   ──────────────────────────────────────────────── */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 16px;
}

.toggle {
  display: inline-flex;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--accent);
  border-radius: 40px;
}

.toggle-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 24px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.28px;
  line-height: 1.5;
  color: var(--accent);
  white-space: nowrap;
  transition: background-color 160ms ease, color 160ms ease;
}

.toggle-pill.is-active {
  background: var(--accent);
  color: var(--dark);
}

.toggle-pill:not(.is-active):hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

.nav-links {
  display: inline-flex;
  gap: 16px;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 28px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.6;
  color: var(--accent);
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: text-underline-offset 160ms ease;
}

.nav-link:hover {
  text-underline-offset: 6px;
}

.nav-link:hover {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ────────────────────────────────────────────────
   Hero
   ──────────────────────────────────────────────── */
.hero-section {
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 6px;
}

.headline {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 100px;
  line-height: 1;
  letter-spacing: 2px;
  display: flex;
  flex-direction: column;
}


.headline-line {
  display: block;
  white-space: nowrap;
}

.headline-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--accent);
  text-stroke: 2px var(--accent);
}

.headline-filled {
  color: var(--accent);
}

.intro {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--text-light);
  isolation: isolate;
}

.hl {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  margin-inline: 8px;
}

.hl-bg {
  position: absolute;
  inset: 50% auto auto 50%;
  width: calc(100% + 12px);
  height: 26px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  z-index: -1;
}

.hl-text {
  position: relative;
  font-weight: 800;
  color: var(--hl-text);
}

/* ────────────────────────────────────────────────
   Lower section: Uber card + company logos
   ──────────────────────────────────────────────── */
.lower {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.uber-card {
  display: flex;
  align-items: center;
  background: var(--accent);
  border-radius: 12px;
}

.uber-logo-wrap {
  padding: 12px;
  flex-shrink: 0;
}

.uber-logo {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.uber-logo img {
  width: 45.612px;
  height: 16px;
}

.uber-text {
  flex: 1;
  padding: 16px 16px 16px 8px;
  color: var(--dark);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
}

.uber-text b {
  font-family: var(--font-inktrap);
  font-weight: 800;
}

/* Company logos row */
.companies {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 145px;
}

.logo {
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

.logo-glean {
  width: 60px;
  height: 24px;
}
.logo-atlassian {
  width: 108.712px;
  height: 17.886px;
}
.logo-freshworks {
  width: 109.462px;
  height: 31px;
}
.logo-zoho {
  width: 62.978px;
  height: 26.864px;
}

/* ────────────────────────────────────────────────
   View switching: only one view shown at a time
   ──────────────────────────────────────────────── */
.view {
  display: none;
  flex-direction: column;
  gap: 80px;
  width: 100%;
}

/* Work view stacks several major sections at 100px gaps. */
.view-work {
  gap: 100px;
}

/* Inside the Work hero block, the existing hero + currently-at + logos
   stack with a 64px rhythm. */
.hero-block {
  display: flex;
  flex-direction: column;
  gap: 64px;
  width: 100%;
}

[data-view="work"] .view-work,
[data-view="life"] .view-life {
  display: flex;
}

.nav-work,
.nav-life {
  display: none;
}

[data-view="work"] .nav-work,
[data-view="life"] .nav-life {
  display: inline-flex;
}

/* ────────────────────────────────────────────────
   Life view: bucket-list card overlapping the map
   ──────────────────────────────────────────────── */
.life-hero {
  position: relative;
}

/* The Life view stacks: hero (heading + intro) → world section → outro,
   with a tighter rhythm than the .view default 80px gap. */
[data-view="life"] .view-life {
  gap: 64px;
}

.world-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.world-map {
  position: relative;
  width: 100%;
  /* dot color via currentColor inside the svg */
  color: #6a6a6a;
}

.world-map__svg {
  display: block;
  width: 100%;
  height: auto;
}

.bucket-card {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--accent);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: var(--dark);
  width: max-content;
  z-index: 2;
}

.destinations {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0 12px;
  padding-right: 24px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-light);
}

/* Show only the destinations list matching the active bucket-option. */
.world-section[data-list="completed"] .destinations-planned,
.world-section[data-list="planned"] .destinations-completed {
  display: none;
}

.destinations li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.destinations li + li::before {
  content: "|";
  margin-right: 12px;
  color: color-mix(in srgb, var(--text-light) 40%, transparent);
}

.flag {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.life-outro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 6px;
  width: 100%;
}

.afterword {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--text-light);
}

.tagline {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 300;
  font-size: 20px;
  line-height: 1.6;
  color: var(--accent);
}

.bucket-head {
  display: flex;
  flex-direction: column;
  padding: 16px 16px 8px;
  line-height: 1.5;
}

.bucket-head h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 28px;
  width: 117px;
  margin-bottom: -8px;
}

.bucket-head p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 18px;
  width: 117px;
}

.bucket-body {
  padding: 8px 16px 16px;
}

.bucket-body p {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  width: 195px;
}

.bucket-options {
  margin-top: auto;
  padding: 8px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bucket-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--dark);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
}

.bucket-option:focus-visible {
  outline: 2px solid var(--dark);
  outline-offset: 2px;
  border-radius: 4px;
}

.bucket-option .radio {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-bottom: 4px;
}

/* ────────────────────────────────────────────────
   Life view: "What else" section
   ──────────────────────────────────────────────── */
.what-else {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 6px;
  width: 100%;
}

.what-else h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.5;
  color: #fff;
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--text-light) 24%, transparent);
}

.what-else-grid {
  display: grid;
  grid-template-columns: 3fr 2fr; /* 60 / 40 split */
  gap: 32px;
  /* row height determined by the left column only; right column's
     children are absolutely positioned so they don't push the row */
}

.what-else-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.what-else-body {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 300;
  color: var(--text-light);
}

/* Right column: bike + bubble both absolutely positioned inside,
   so neither pushes the row taller than the left text column. */
.what-else-media {
  position: relative;
  align-self: stretch;
  min-height: 0;
}

.what-else-image {
  position: absolute;
  top: 0;
  right: 168px; /* sits next to the bubble (bubble max-width 200 − 32 overlap) */
  height: 100%;
  width: auto;
  display: block;
  z-index: 1;
}

.quote-bubble {
  position: absolute;
  top: 24px;
  right: 0;
  background: var(--accent);
  color: var(--dark);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300;
  max-width: 200px;
  z-index: 2;
}

.quote-bubble b {
  font-family: var(--font-inktrap);
  font-weight: 800;
}

/* Tail pointing toward the image (left side, near the top) */
.quote-bubble::before {
  content: "";
  position: absolute;
  left: -7px;
  top: 18px;
  width: 0;
  height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 8px solid var(--accent);
}

/* ────────────────────────────────────────────────
   Section heading + divider rule (Selected works,
   Apart from work, Other pet projects)
   ──────────────────────────────────────────────── */
.section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.5;
  color: var(--accent);
  white-space: nowrap;
}

.section-head::after {
  content: "";
  display: block;
  border-top: 1px solid color-mix(in srgb, var(--text-light) 30%, transparent);
}

/* ────────────────────────────────────────────────
   Selected works / Other pet projects
   ──────────────────────────────────────────────── */
.works-section {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
}

.works {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
}

.works-divider {
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--text-light) 30%, transparent);
  width: 100%;
  margin: 0;
}

.work {
  display: flex;
  transition: transform 200ms ease;
  transform-origin: center;
}

.work:hover {
  transform: scale(0.98);
}

/* Cards marked .work--linked: the whole article is a click target.
   The "Read more" anchor stretches via ::after to cover the article. */
.work--linked {
  position: relative;
  cursor: pointer;
}

.work--linked .work__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.work__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.work__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.2;
  color: var(--text-light);
}

.work__desc {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-light);
}

.work__link {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.5;
  color: var(--accent);
  padding: 8px 0;
  width: max-content;
  white-space: nowrap;
}

.work__image {
  width: 100%;
}

.work__image img {
  display: block;
  width: 100%;
  height: 300px;
  object-fit: contain;
}

/* Featured row: text left, image right; text top-aligned next to the image */
.work--featured {
  align-items: flex-start;
  gap: 40px;
}

.work--featured .work__text {
  flex: 1;
  justify-content: flex-start;
}

.work--featured .work__image {
  flex: 1;
}

/* Stack pair: two cards side by side, text on top + image on bottom.
   Image pinned to the bottom so cards align even when titles wrap differently. */
.works-row {
  display: flex;
  align-items: stretch;
  gap: 48px;
  width: 100%;
}

.work--stack {
  flex: 1;
  flex-direction: column;
}

.work--stack .work__text {
  padding-bottom: 24px;
}

.work--stack .work__image {
  margin-top: auto;
}

/* Tag (small rotated badge — used for company labels on each card) */
.tag {
  position: relative;
  display: inline-block;
  align-self: flex-start; /* don't stretch when inside flex column */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.5;
  color: var(--dark);
  padding: 2px 8px;
  isolation: isolate;
}

.tag::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 100%;
  height: 20px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  z-index: -1;
}

/* ────────────────────────────────────────────────
   Domain expertise card
   ──────────────────────────────────────────────── */
.domain-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: var(--accent);
  border-radius: 16px;
  width: 100%;
  color: #000;
  /* Parent .view-work uses gap: 100px; trim 36px on each side → 64px visible spacing. */
  margin-top: -36px;
  margin-bottom: -36px;
}

.domain-card__copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 521px;
  flex-shrink: 0;
}

.domain-card__copy h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.2;
}

.domain-card__copy p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
}

.domain-card__chips {
  list-style: none;
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-content: flex-start;
  min-width: 0;
}

.domain-card__chips li {
  background: #000;
  color: var(--accent);
  padding: 6px 12px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
}

/* ────────────────────────────────────────────────
   Contact CTA banner (bottom of Work view)
   ──────────────────────────────────────────────── */
.cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: var(--accent);
  border-radius: 16px;
  width: 100%;
  /* Override only the gap above this card. Parent .view-work has gap: 100px;
     pulling up by 52px makes the visible spacing 48px. No other gaps change. */
  margin-top: -52px;
}

.cta-card__text {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.5;
  color: var(--dark);
  white-space: nowrap;
}

.cta-card__actions {
  display: inline-flex;
  gap: 8px;
}

.cta-pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background: #000;
  color: var(--accent);
  border-radius: 18px;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  transition: background-color 160ms ease;
}

.cta-pill:hover {
  background: #1a1a1a;
}

/* ────────────────────────────────────────────────
   Apart from work
   ──────────────────────────────────────────────── */
.apart-section {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.apart-content {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
}

.apart-text {
  display: flex;
  flex-direction: column;
  color: var(--text-light);
}

.apart-text p {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 20px;
  line-height: 1.5;
}

.apart-text__caption {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.volume-icon {
  flex-shrink: 0;
  color: var(--text-light);
}

.apart-media {
  position: relative;
  height: 481px;
  background: color-mix(in srgb, var(--text-light) 10%, transparent);
  border-radius: 12px;
  overflow: hidden;
}

.apart-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ────────────────────────────────────────────────
   Responsive scaling
   ──────────────────────────────────────────────── */
@media (max-width: 1460px) {
  .page {
    padding: 56px clamp(24px, 6vw, 280px) 48px;
  }
}

@media (max-width: 960px) {
  .container {
    gap: 80px;
  }
  .headline {
    font-size: clamp(56px, 12vw, 100px);
    letter-spacing: 1px;
  }
  .hero-section {
    gap: 56px;
  }
  .intro {
    font-size: 20px;
  }
  .companies {
    flex-wrap: wrap;
    gap: 48px 64px;
  }
}

@media (max-width: 640px) {
  .page {
    padding: 32px 20px 56px;
  }
  .container {
    gap: 56px;
  }
  .header {
    flex-wrap: wrap;
    gap: 16px;
  }
  .nav-links {
    gap: 4px;
  }
  .nav-link {
    padding: 8px 12px;
    font-size: 14px;
  }
  .headline {
    letter-spacing: 0;
  }
  .uber-card {
    align-items: stretch;
  }
  .uber-text {
    font-size: 16px;
  }
  .hl-bg {
    height: 28px;
  }
}