/* =========================================================
   Hire V2.0 — Home  (Figma 13284:12692)
   Every value below is lifted directly from the Figma node.
   ========================================================= */

/* ---- Self-hosting Inter Tight -------------------------------------------
   Delete the <link> to Google Fonts in index.html and uncomment this after
   dropping the .woff2 files into /fonts.

@font-face {
  font-family: "Inter Tight";
  src: url("fonts/InterTight-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
-------------------------------------------------------------------------- */

/* ---------- tokens ---------- */
:root {
  /* colour */
  --c-bg:            #ffffff;
  --c-ink:           #000000;
  --c-ink-muted:     #666666;
  --c-ink-ghost:     #cbcbcb;
  --c-pill:          #f2f2ef;
  --c-card:          #fafafa;
  --c-shot:          #ffffff;
  --c-shot-alt:      #f2f2f2;
  --c-hairline:      rgba(0, 0, 0, 0.12);
  --c-avatar-ring:   #f5f5f5;

  /* type — every tracking value in the file is exactly -1% of its size */
  --font:            "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --weight:          600;          /* Inter Tight SemiBold */
  --track:           -0.01em;      /* -0.14 / -0.16 / -0.2 / -0.32 px */
  --lh-tight:        1.1;          /* headings */
  --lh-flat:         1;            /* labels */

  --t-heading:       32px;
  --t-quote:         20px;
  --t-author:        16px;
  --t-label:         14px;

  /* spacing */
  --pad-page:        20px;         /* nav + work section padding */
  --pad-hero:        40px;
  --pad-card:        40px;
  --gap-work:        20px;
  --gap-nav-left:    4px;
  --gap-nav-right:   8px;
  --gap-quote:       12px;

  /* geometry */
  --nav-h:           70px;         /* 30px avatar + 2 x --pad-page */
  --hero-h:          calc(100vh - var(--nav-h));   /* hero fills the rest of the first screen */
  --hero-min:        600px;        /* floor, so it never crushes on a short window */
  --portrait:        355px;
  --portrait-h:      356px;
  --portrait-shift:  95.43px;      /* top: calc(50% - 95.43px) */
  --r-pill:          40px;
  --r-card:          12px;
  --r-shot:          8px;
}

@supports (height: 100dvh) {
  :root { --hero-h: calc(100dvh - var(--nav-h)); }
}

/* ---------- reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

/* Lenis drives the scrolling, so the native smooth behaviour must be off.
   (Without this the two fight each other and anchor jumps stutter.) */
html { scroll-behavior: auto; }

/* --- Lenis 1.3.4 stylesheet, inlined so the page needs no extra request --- */
html.lenis,
html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

body {
  margin: 0;
  background: var(--c-bg);
  font-family: var(--font);
  font-weight: var(--weight);
  letter-spacing: var(--track);
  color: var(--c-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

body > * { width: 100%; }

p, figure, blockquote { margin: 0; }
img { display: block; }

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

:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 2px;
}

/* =========================================================
   NAV — 13284:12693
   ========================================================= */
.nav {
  position: sticky;      /* rides along at the top of the window while you scroll */
  top: 0;
  z-index: 10;           /* sits above the hero portrait and the project cards */
  background: var(--c-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--pad-page);
  overflow: hidden;
}

.nav__left {
  display: flex;
  align-items: center;
  gap: var(--gap-nav-left);
}

.nav__right {
  display: flex;
  align-items: center;
  gap: var(--gap-nav-right);
}

/* pill — 30px tall: 14px label at line-height 1 + 8px padding top/bottom */
.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--r-pill);
  background: var(--c-pill);
  color: var(--c-ink-muted);
  font-size: var(--t-label);
  line-height: var(--lh-flat);
  letter-spacing: var(--track);
  white-space: nowrap;
  overflow-wrap: break-word;
  transition: background-color 160ms ease, color 160ms ease;
}

.pill:hover { background: #e9e9e4; }

.pill--dark {
  background: var(--c-ink);
  color: #ffffff;
}

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

.pill__icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.avatar {
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border: 0.4px solid var(--c-avatar-ring);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 60%;   /* matches the Figma image-fill crop */
}

/* =========================================================
   HERO — 13284:12707
   ========================================================= */
.hero {
  position: relative;
  height: var(--hero-h);
  min-height: var(--hero-min);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: var(--pad-hero);
  overflow: hidden;
}

.hero__heading {
  width: 413.201px;
  flex-shrink: 0;
  font-size: var(--t-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--track);
  color: var(--c-ink);
  overflow-wrap: break-word;
}

.hero__heading span { color: var(--c-ink-ghost); }

/* absolutely positioned, so it sits outside the space-between flow */
.hero__portrait {
  position: absolute;
  left: 50%;
  top: calc(50% - var(--portrait-shift));
  transform: translate(-50%, -50%);
  width: var(--portrait);
  height: var(--portrait-h);
  border-radius: 400px;
  overflow: hidden;
  pointer-events: none;
}

.hero__portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--gap-quote);
  text-align: right;
  flex-shrink: 0;
}

.quote__text {
  width: 286.261px;
  font-size: var(--t-quote);
  line-height: var(--lh-tight);
  letter-spacing: var(--track);
  color: var(--c-ink);
  overflow-wrap: break-word;
}

.quote__author {
  font-style: normal;
  font-size: var(--t-author);
  line-height: var(--lh-flat);
  letter-spacing: var(--track);
  color: var(--c-ink-muted);
  white-space: nowrap;
}

/* =========================================================
   WORK — 13284:12713
   ========================================================= */
.work {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: var(--gap-work);
  padding: var(--pad-page);
  overflow: hidden;
}

.card {
  width: 100%;
  display: flex;
  align-items: flex-start;
  padding: var(--pad-card);
  border-radius: var(--r-card);
  background: var(--c-card);
  overflow: hidden;
}

/* The shot is flex:1 inside a 40px-padded card, so at a 1440px viewport it is
   exactly 1320px wide and its height follows --ratio exactly:
   1280/800 → 825px · 1320/859 → 859px · 1320/1408 → 1408px            */
.shot {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: var(--ratio);
  border-radius: var(--r-shot);
  background: var(--c-shot);
  overflow: hidden;
}

.shot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r-shot);
}

.shot--bordered { border: 0.4px solid var(--c-hairline); }

/* single card whose fill is inset horizontally on a grey plate */
.shot--inset { background: var(--c-shot-alt); }

.shot--inset > img {
  position: absolute;
  top: 0;
  left: 8.06%;
  width: 83.88%;
  height: 100%;
  border-radius: 0;
}

/* =========================================================
   RESPONSIVE
   Desktop stays pixel-exact. Everything below only kicks in
   once the fixed hero measurements stop fitting.
   ========================================================= */

/* --- laptop --- */
@media (max-width: 1180px) {
  :root {
    --portrait:       300px;
    --portrait-h:     301px;
    --portrait-shift: 80px;
    --pad-card:       32px;
  }
}

/* --- tablet --- */
@media (max-width: 900px) {
  :root {
    --t-heading: 28px;
    --t-quote:   18px;
    --pad-hero:  24px;
    --pad-card:  24px;
  }

  .hero__heading { width: 340px; }
  .quote__text   { width: 250px; }
}

/* --- mobile --- */
@media (max-width: 720px) {
  :root {
    --t-heading: 26px;
    --t-quote:   17px;
    --t-author:  15px;
    --pad-page:  12px;
    --pad-hero:  20px;
    --pad-card:  14px;
    --gap-work:  12px;
    --r-card:    10px;
  }

  .nav {
    flex-wrap: wrap;
    gap: 12px;
  }

  .hero {
    height: auto;
    /* Fill the screen below the nav. svh = the "small" viewport height, i.e.
       measured with the browser's address bar showing — so the hero doesn't
       resize every time that bar hides on scroll. */
    min-height: calc(100vh - var(--nav-h));
    min-height: calc(100svh - var(--nav-h));
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 32px;
    padding-top: 8px;
    padding-bottom: 40px;
  }

  .hero__portrait {
    position: static;
    transform: none;
    order: 1;
    width: min(72vw, 300px);
    height: auto;
    aspect-ratio: 355 / 356;
    margin: 0 auto;
  }

  .hero__heading {
    order: 2;
    width: 100%;
    max-width: 420px;
  }

  .quote {
    order: 3;
    align-items: flex-start;
    text-align: left;
  }

  .quote__text {
    width: 100%;
    max-width: 340px;
  }
}

/* --- accessibility --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}