/* Tokens taken from the Figma file (Page 1 › Desktop, 1280px frame). The site is dark for
   every visitor: the Cargo reference's inverted palette. */
:root {
  color-scheme: dark;

  --color-bg: #191919;
  --color-ink: #dddddd;     /* 12.9:1 */
  --color-muted: #757575;   /* 3.8:1; used only on 24px text, which WCAG AA counts as large */
  --color-sage: #6d9145;    /* Figma's green, 4.8:1 on the dark background */
  --color-plum: #b48ddb;    /* focus ring, 6.5:1 */
  --color-button-disabled: rgba(255, 255, 255, 0.25);
  --shadow-media: 0 0 3.3px rgba(0, 0, 0, 0.25);

  --font-sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;   /* a free neo-grotesk in the spirit of the Cargo reference's Monument Grotesk */
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-sm: 14px;
  --text-md: 24px;
  /* Line heights on a 4px rhythm, opened up for Mona Sans's tall lowercase */
  --leading-body: 20px;      /* 14px text, 1.43 */
  --leading-heading: 28px;   /* 24px text, 1.17 */
  --leading-display: 0.94;   /* the hero heading only */
  --tracking-sm: -0.07px;
  --tracking-body: -0.14px;
  --tracking-md: -0.12px;   /* -0.5%, as in Figma */

  --page-padding: 60px;   /* Figma frame: 60px on every side */
  /* One column grid shared by the header, project headers and footer: the Figma
     project-header columns (titles start on the 359.9px guide) */
  --grid-columns:
    minmax(0, 299.888fr)
    minmax(0, 437.888fr)
    minmax(0, 365.888fr)
    minmax(0, 56.336fr);
  --space-related: 24px;   /* inside a group: heading → its paragraph */
  --space-group: 32px;     /* between groups: text → call to action */
  --radius-button: 12px;
  --radius-media: 15px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking-sm);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, p, ul {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

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

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

a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:focus-visible {
  outline: 2px solid var(--color-plum);
  outline-offset: 3px;
  border-radius: 2px;
}

.is-muted { color: var(--color-muted); }

.page {
  padding: var(--page-padding);
}

/* ---------- Site header (Figma 53:3513) ---------- */

.site-header {
  display: grid;
  grid-template-columns: var(--grid-columns);
  align-items: start;
  min-height: 106px;
  padding-bottom: 4.5px;
}

/* The first line of every column sits on one baseline, 16.5px down, level with
   "Srishti" as in Figma; the margins below line each column up to it. */
.site-header__repo {
  margin-top: 1.5px;
  line-height: var(--leading-body);
}

.site-header__identity {
  margin-top: -6.5px;
  font-size: var(--text-md);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-md);
  white-space: nowrap;   /* one line each, even where the column is narrower than the role */
}

.site-header__role {
  margin-top: 24px;   /* with the blank line in the status column, "Research…" sits level with "Bachelors…" */
}

.site-header__status,
.site-header__links {
  margin-top: 1.5px;
  line-height: var(--leading-body);
}

.site-header__current {
  color: var(--color-sage);
  font-weight: 700;   /* Bold is the one emphasis weight; all other text is Regular, as on the Cargo reference */
}

.site-header__education {
  margin-top: var(--leading-body);   /* one blank line */
}

.site-header__links {
  justify-self: end;   /* wider than the last column, so it hangs from the right edge */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  white-space: nowrap;
}

/* ---------- Hero (Figma 53:3520) ---------- */

/* At every width the header and hero fill exactly the browser window, as on the
   Cargo reference: the heading sits on the bottom edge, inside the same frame
   (the page padding) as the header at the top, and the projects start below the fold. */
.intro {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--page-padding));
  min-height: calc(100svh - var(--page-padding));
}

.hero {
  --hero-gap: clamp(96px, 13svh, 160px);   /* header to heading, at least; grows with the window's height */
  --hero-fit: 63cqw;                       /* how wide the longest line runs */
  --frame-used: 226px;                     /* page padding above and below, plus the header */
  container-type: inline-size;
  flex: 1;
  display: flex;
  align-items: flex-end;
  padding-top: var(--hero-gap);
  padding-bottom: var(--page-padding);
}

.hero__title {
  /* Set like the Cargo reference: Regular, tracked tight, and sized so the longest
     line ("complexities", 5.32em) runs the --hero-fit width. Capped by the window's
     height so the heading never runs into the header: it is 3.75em tall. */
  font-size: clamp(46px, 9.375vw, 120px);   /* for browsers without container or small-viewport units */
  font-size: max(36px, min(var(--hero-fit) / 5.32, (100svh - var(--frame-used) - var(--hero-gap)) / 3.75));
  font-weight: 400;
  line-height: var(--leading-display);
  letter-spacing: -0.05em;
}

/* Bottom right of the frame, level with the heading's last line, as in Figma */
.hero__photo {
  flex: none;
  width: 156.061px;
  height: 139.483px;
  margin-left: auto;
  border-radius: var(--radius-media);
  object-fit: cover;
  transform: scaleX(-1);   /* mirrored, as in Figma: the plant sits on the side facing the title */
}

.hero__last {
  position: relative;
  display: block;
  font-size: 0.98333em;          /* last line is 118px in the design */
  white-space: pre;
  word-spacing: 0.0123em;        /* the six spaces that make room for the eye keep their 0.25em gap under the tight tracking */
}

.hero__eye {
  position: absolute;
  left: 0.1288em;
  top: 0.216em;
  width: 0.7628em;
  height: auto;
}

/* ---------- Projects (Figma 53:4417 – 53:4520) ---------- */

.project__header {
  display: grid;
  grid-template-columns: var(--grid-columns);
  align-items: start;
  min-height: 110px;
  padding-top: 10.4px;   /* 16px of clear space between the divider and the capitals, as on the Cargo reference */
  border-top: 1px solid var(--color-ink);
}

.project__codename {
  font-size: var(--text-md);
  line-height: var(--leading-heading);   /* same as the title, so the two share a baseline */
  letter-spacing: var(--tracking-md);
}

.project__kind {
  line-height: var(--leading-body);   /* one body line under the name */
}

.project__title {
  max-width: 395.451px;
  color: var(--color-muted);
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-md);
}

.project__meta {
  margin-top: 0.7px;   /* capitals start level with the name's and title's */
  line-height: var(--leading-body);
}

.project__status {
  color: var(--color-sage);   /* the same "current" green, and weight, as the header's role */
  font-weight: 700;
}

/* On the shared grid: the text sits in the first column and the thumbnail runs from
   the title column to the page edge, as Cargo's images start on its column lines */
.project__body {
  display: grid;
  grid-template-columns: var(--grid-columns);
  align-items: start;   /* text starts at the image's top edge */
  padding-bottom: 48px;
}

.project__content {
  grid-column: 1;
  min-width: 0;
  padding-right: 24px;   /* clear space before the thumbnail where the first column is narrow */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-group);
}

.project__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-related);
  width: 278px;
  max-width: 100%;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

.project__lede {
  font-size: var(--text-sm);
  font-weight: 700;
}

/* Typewriter (typewriter.js): untyped letters keep their space, so nothing reflows. */
.typewriter__char {
  visibility: hidden;
}

.typewriter__char.is-shown {
  visibility: visible;
}

/* Zero-size anchor on the baseline, so moving it never changes line heights. */
.typewriter__caret {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0;
}

.typewriter__caret::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.9em;
  width: 2px;
  height: 1.22em;   /* 17.1px on 14px text, as in Figma */
  background: currentColor;
  animation: caret-blink 1.1s steps(1, end) infinite;
}

.typewriter.is-typing .typewriter__caret::before {
  animation: none;   /* solid while typing, blinks when idle */
}

@keyframes caret-blink {
  50% { opacity: 0; }
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 226px;
  max-width: 100%;   /* the first column is narrower than the button just above the tablet breakpoint */
  height: 36px;
  border-radius: var(--radius-button);
  background: var(--color-ink);
  color: var(--color-bg);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-sm);
  white-space: nowrap;
  transition: transform 200ms ease-out;
}

/* Figma Sites hover: the button shrinks to 98% from its centre. */
.button:hover {
  transform: scale(0.98);
  text-decoration: none;
}

/* WIP isn't clickable, so it doesn't react to hover. */
.button--disabled {
  background: var(--color-button-disabled);
  cursor: default;
}

.button--disabled:hover {
  transform: none;
}

.project__media {
  grid-column: 2 / -1;
  position: relative;
  overflow: hidden;
  width: 100%;
  border-radius: var(--radius-media);
  box-shadow: var(--shadow-media);
}

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

/* each thumbnail shown whole, at its own proportions */
.project__media--ridebuddy { aspect-ratio: 1967 / 863; }
.project__media--darkstores { aspect-ratio: 1967 / 835; }
.project__media--bnpl { aspect-ratio: 1962 / 827; }
.project__media--inbetween { aspect-ratio: 1962 / 827; }

/* ---------- Footer (Figma 61:10482) ---------- */

.site-footer {
  display: grid;
  grid-template-columns: var(--grid-columns);
  align-items: start;
  padding-top: 11.1px;   /* 16px of clear space under the line, as in the project headers */
  border-top: 1px solid var(--color-ink);
  line-height: var(--leading-body);
}

/* The sign-off leads into the Resume link, in the details column ("Currently:", project details) */
.site-footer__tagline { grid-column: 3; }

/* A copy of the hero photo, shown in the mobile layout */
.site-footer__photo {
  display: none;
  width: 156.061px;
  height: 139.483px;
  border-radius: var(--radius-media);
  object-fit: cover;
  transform: scaleX(-1);   /* mirrored, as in the hero */
}

.site-footer__link {
  grid-column: 4;
  justify-self: end;
  white-space: nowrap;
}

/* ---------- Case-study pages (Figma: Last Mile Inside, BNPLBehavior, Inbetween) ---------- */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.cs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 57px;
  border-top: 1px solid var(--color-ink);
  font-weight: 500;
  line-height: var(--leading-body);
}

.cs-header__back {
  white-space: nowrap;
}

.cs-slides img {
  width: 100%;
  height: auto;
}

.cs-footer {
  margin-top: 16px;
}

/* Live boards (Miro, FigJam) sit in the slide column at 16:9, like the slides. */
.cs-embed {
  aspect-ratio: 16 / 9;
  background: #f4f4f2;
}

.cs-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Slides built from Figma layers. --u is 1/1160 of the slide width, so every
   size inside scales with the slide just like the image slices around it. */
.slide {
  --u: calc(100cqw / 1160);
  position: relative;
  overflow: hidden;
  container-type: inline-size;
  color: #262626;   /* the slides keep the light colours they were designed in */
  font-family: "Inter", system-ui, sans-serif;
  line-height: 1.5;
  letter-spacing: normal;
}

.slide *,
.slide *::before,
.slide *::after {
  margin: 0;
  padding: 0;
  border: 0 solid;
}

.slide img {
  display: block;
}

.slide li {
  margin-inline-start: calc(16.3 * var(--u));
}

.slide li::marker {
  font-size: calc(10.875 * var(--u));
}

/* ---------- Metamorphosis case study (Figma: Dark Site Design › Metamorphosis) ----------
   A written page rather than slides: one warm panel, with the text in a 1012px column
   (centred, as in the 1160px Figma panel) and 50px between sections. */

.mm {
  position: relative;
  overflow: hidden;
  padding-bottom: 50px;
  /* Figma: #262423 under a radial vignette (13% → 100% black, at 30%) */
  background:
    radial-gradient(47.9% 142% at 50% 50%, rgba(0, 0, 0, 0.039), rgba(0, 0, 0, 0.3)),
    #262423;
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
}

/* at least 48px each side, so the outer phase labels (centred on their rings, wider
   than the column allows) stay inside the panel down to 1024px */
.mm__inner {
  width: min(1012px, 100% - 96px);
  margin-inline: auto;
}

/* The device photo runs the panel's width behind the sponsor and title, at 47% */
.mm__hero {
  position: relative;
  min-height: 338px;
  padding-top: 49px;
  padding-bottom: 48px;
}

.mm__hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.47;
}

.mm__hero .mm__inner {
  position: relative;
}

.mm__sponsor {
  width: 211.333px;
  height: auto;
  margin-top: 15px;
}

.mm__title {
  max-width: 530px;
  margin-top: 44.8px;
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-md);
}

/* Timeline, Role and Client on the Figma columns (0, 319 and 611px), Methods under Timeline */
.mm-facts {
  display: grid;
  grid-template-columns: minmax(0, 319fr) minmax(0, 292fr) minmax(0, 401fr);
  row-gap: 52px;
  margin: 21.5px 0 0;
}

.mm-facts dt {
  font-weight: 700;
}

.mm-facts dd {
  margin: 15px 0 0;
}

.mm-section {
  margin-top: 50px;
  padding-top: 50px;
  border-top: 1px solid var(--color-muted);
}

.mm-section__heading {
  margin-bottom: 16px;
  font-size: var(--text-md);
  font-weight: 400;
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-md);
}

.mm-link {
  display: inline-block;
  margin-top: 16px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.mm-features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.mm-features figure {
  margin: 0;
}

.mm-features img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.mm-features figcaption {
  margin-top: 16px;
  text-align: center;
}

.mm-prose {
  display: flex;
  flex-direction: column;
  gap: var(--leading-body);   /* one blank line between paragraphs */
}

.mm-problem {
  margin-top: 35px;
}

.mm-problem__label {
  font-size: var(--text-sm);
  font-weight: 400;
}

/* Approach: the rings and orbit lines are placed in the text column's units, so the
   drawing scales with the column; the phase labels keep their 14px. */
.mm-approach {
  --u: calc(100cqw / 1012);
  container-type: inline-size;
  margin-top: 50px;
}

.mm-approach__art {
  position: relative;
  height: calc(247.44 * var(--u));   /* down to the phase dots */
}

.mm-approach__art img {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  max-width: none;
}

/* level lines Figma turns about their centre. They stay 0.5px thick at every width:
   scaled with the column they drop under half a pixel, and browsers skip drawing them. */
.mm-approach__art .mm-approach__turned {
  height: 0.5px;
  transform: rotate(var(--turn));
}

.mm-phases {
  position: relative;
  height: 122px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* each label centred under its rings, its dot 20.8px above the text */
.mm-phases li {
  position: absolute;
  top: 0;
  left: calc(var(--cx) * var(--u));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  white-space: nowrap;
  transform: translateX(-50%);
}

.mm-phases__dot {
  width: 16.917px;
  height: 16.917px;
  margin-bottom: 20.8px;
}

.mm-phases__note {
  margin-top: 4px;
  color: var(--color-sage);   /* the "In progress" green, 4.8:1 */
}

/* Snapshots: the Figma collage on an 8px gutter, placed in the column's units */
.mm-collage {
  --u: calc(100cqw / 1012);
  container-type: inline-size;
  position: relative;
  aspect-ratio: 1012 / 1273.2;
  margin-top: 50px;
}

.mm-collage img {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  object-fit: cover;
}

/* Set like the homepage project titles: Heading/24 in the muted grey (large text, 3.3:1
   on the panel, so AA) */
.mm-note {
  margin-top: 50px;
  color: var(--color-muted);
  font-size: var(--text-md);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-md);
}

/* ---------- Mobile layout ----------
   As on the Cargo reference, the site has two layouts and the screen's shape picks
   between them: the column grid above on landscape screens at least 1024px wide, and
   this one on portrait screens (4:5 or taller) and anything narrower. Text keeps its
   14px and 24px sizes in both. */

@media (max-width: 1023px), (max-aspect-ratio: 4/5) {
  :root {
    --page-padding: clamp(20px, 5vw, 48px);
  }

  /* Two columns, as in the Cargo reference's phone layout: the site name and links on
     the left, the name block and status on the right. On phones "Case Study / Repo"
     takes two lines, leaving the name block room for "Strategic Designer". */
  .site-header {
    grid-template-columns: minmax(6.2em, 0.4fr) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "repo  identity"
      "links identity"
      ".     status";
    column-gap: 24px;
    row-gap: 20px;
  }

  .site-header__repo { grid-area: repo; }
  .site-header__status { grid-area: status; }

  .site-header__identity {
    grid-area: identity;
    white-space: normal;
  }

  /* always "Research+ / Strategy+Design", so the header keeps one height */
  .site-header__identity p:last-child {
    max-width: 8.2em;
  }

  .site-header__links {
    grid-area: links;
    justify-self: start;
    align-items: flex-start;
    text-align: left;
  }

  /* The heading runs the full width at the foot of the first screen; the photo moves
     to the footer, beside the sign-off */
  .hero {
    --hero-gap: 20px;
    --hero-fit: 100cqw;
    --frame-used: calc(2 * var(--page-padding) + 255.5px);   /* the page padding and the two-column header */
  }

  .hero__photo {
    display: none;
  }

  .project__header {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "name"
      "title"
      "meta";
    row-gap: 12px;
    min-height: 0;
    padding-bottom: 28px;
  }

  .project__name { grid-area: name; }
  .project__meta { grid-area: meta; }

  .project__title {
    grid-area: title;
    margin-top: 8px;
  }

  .project__body {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 28px;
    padding-bottom: 40px;
  }

  .project__content,
  .project__media { grid-column: auto; }   /* stacked, full width */

  .project__content { padding-right: 0; }

  .project__text {
    width: 36rem;
  }

  .button {
    width: 100%;
    max-width: 320px;
  }

  /* The sign-off, the Resume link and, after a blank line, the copyright, beside the photo */
  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      "tagline photo"
      "link    photo"
      "copy    photo";
    column-gap: 24px;
    row-gap: 4px;
  }

  .site-footer > p:first-child {
    grid-area: copy;
    margin-top: 16px;
  }

  .site-footer__tagline { grid-area: tagline; }

  .site-footer__link {
    grid-area: link;
    justify-self: start;
  }

  .site-footer__photo {
    display: block;
    grid-area: photo;
    margin-top: 4.8px;   /* its top level with the capitals, 16px under the line */
    /* a little smaller on the narrowest phones, so "© 2026 All Rights Reserved" (13em)
       stays on one line beside it */
    width: min(156.061px, 100vw - 2 * var(--page-padding) - 24px - 13em);
    height: auto;
    aspect-ratio: 156.061 / 139.483;
  }

  /* Metamorphosis: one column. The device photo stays behind the title, the facts
     and feature cards stack, the phases become a list under the drawing, and the
     collage flows in two columns with the wide images across both. */
  .mm__inner {
    width: calc(100% - 32px);
  }

  .mm__hero {
    min-height: 0;
  }

  .mm__hero-photo {
    object-position: 85% 50%;   /* keeps the device in view on a tall, narrow hero */
  }

  .mm-facts {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }

  .mm-features {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .mm-phases {
    display: grid;
    gap: 16px;
    height: auto;
    margin-top: 24px;
  }

  .mm-phases li {
    position: static;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
    white-space: normal;
    transform: none;
  }

  .mm-phases__dot {
    flex: none;
    margin: 1.5px 0 0;   /* centred on the first line */
  }

  .mm-phases li[aria-current] {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* the note under the current phase's text, in line with it */
  .mm-phases__note {
    flex-basis: 100%;
    margin: 0 0 0 28.9px;
  }

  .mm-phases__wrap {
    display: none;
  }

  .mm-collage {
    aspect-ratio: auto;
    columns: 2;
    column-gap: 8px;
  }

  .mm-collage img {
    position: static;
    width: 100%;
    height: auto;
    margin-bottom: 8px;
    break-inside: avoid;
  }

  .mm-collage .mm-collage__wide {
    column-span: all;
  }
}

/* On phones the rings shrink to faint hairlines, so the phase list stands alone */
@media (max-width: 640px) {
  .mm-approach {
    margin-top: 0;
  }

  .mm-approach__art {
    display: none;
  }

  .mm-phases {
    margin-top: 0;
  }
}