@font-face {
  font-family: Formula;
  src: url("fonts/FormulaCondensed-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: Formula;
  src: url("fonts/FormulaCondensed-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: Formula;
  src: url("fonts/FormulaCondensed-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color: #000;
  background: #eef2f9;
  font-family: Formula, "Arial Narrow", sans-serif;
  font-synthesis: none;
  --gutter: max(12px, 1.666667vw);
  --gap: max(16px, 2.222222vw);
  --design-unit: calc(100vw / 1440);
  --columns: repeat(16, minmax(0, 1fr));
  --column-gap: calc(32 * var(--design-unit));
  --hero-unit: min(var(--design-unit), calc(100svh / 900));
  --hero-row: calc(32 * var(--hero-unit));
  --hero-row-gap: calc(33 * var(--hero-unit));
  --hero-row-offset: calc(16 * var(--hero-unit));
  /* First artwork follows the bottom of ROW 12 with a 32px scaled gap. */
  --project-start: calc(var(--hero-row-offset) + 11 * (var(--hero-row) + var(--hero-row-gap)) + 2 * var(--hero-row));
  --reveal: calc(100svh - var(--project-start));
}

* { box-sizing: border-box; }
body, h1, h2, figure, ul { margin: 0; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
::selection { color: #eff2f9; background: #000; }
.hero, .projects, .archive { background: #eff2f9; }

.hero {
  --hero-rail-height: max(32px, calc(51 * var(--hero-unit)));
  height: 100vh;
  height: 100svh;
  position: relative;
  display: grid;
  grid-template-columns: var(--columns);
  /* Separate row and gap tracks let text align to either edge of a Figma ROW. */
  grid-template-rows: repeat(14, var(--hero-row) var(--hero-row-gap));
  column-gap: var(--column-gap);
  padding: var(--hero-row-offset) var(--gutter) 0;
}

.header {
  grid-column: 1 / 7;
  grid-row: 1 / 2;
  align-self: start;
  display: flex;
  align-items: flex-start;
  text-transform: uppercase;
}

.identity {
  grid-column: 1 / 7;
  grid-row: 1 / 8;
  align-self: end;
  justify-self: start;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(8px, calc(12 * var(--hero-unit)));
}

.identity p,
.hero-about p {
  margin: 0;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.identity p {
  font-size: max(12px, calc(12 * var(--hero-unit)));
  line-height: 2;
}

.wordmark {
  flex: 0 0 auto;
  text-align: right;
  text-transform: uppercase;
  font-size: max(24px, calc(32 * var(--hero-unit)));
  line-height: 1;
  letter-spacing: 0;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.identity-name {
  display: flex;
  align-items: center;
  gap: max(12px, calc(16 * var(--hero-unit)));
}

.identity-portrait {
  display: block;
  flex: 0 0 auto;
  width: max(43.5px, calc(58 * var(--hero-unit)));
  height: max(43.5px, calc(58 * var(--hero-unit)));
  object-fit: cover;
}

.socials {
  display: flex;
  gap: max(12px, calc(16 * var(--hero-unit)));
  font-size: max(14px, calc(16 * var(--hero-unit)));
  line-height: 1.5;
}

.socials a {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.hero-grid {
  display: contents;
}

.hero h1 {
  grid-column: 7 / -1;
  grid-row: 1 / 8;
  align-self: start;
  font-size: calc(129 * var(--hero-unit));
  font-weight: 700;
  line-height: calc(124 * var(--hero-unit));
  text-transform: uppercase;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.hero-about p {
  grid-column: 7 / -1;
  grid-row: 1 / -1;
  align-self: start;
  margin-top: calc(312 * var(--hero-unit));
  width: 434px;
  max-width: 100%;
  font-size: 16px;
  line-height: 24px;
}

.hero-rule,
.skills {
  grid-row: 21 / 24;
  align-self: end;
  height: var(--hero-rail-height);
}

.hero-rule {
  grid-column: 1 / 7;
  margin-right: calc(8 * var(--hero-unit) - var(--column-gap));
  border-radius: max(16px, calc(24 * var(--hero-unit)));
  background: #000;
}

.skills {
  grid-column: 7 / -1;
  display: flex;
  gap: calc(8 * var(--hero-unit));
  padding: 0;
  list-style: none;
  font-size: calc(24 * var(--hero-unit));
  font-weight: 300;
  line-height: calc(26.152 / 24);
}

.skills li {
  flex: 1 1 0;
  display: grid;
  place-items: center;
  min-width: 0;
  height: var(--hero-rail-height);
  padding-inline: calc(16 * var(--hero-unit));
  border-radius: max(16px, calc(24 * var(--hero-unit)));
  background: #000;
  color: #fff;
}

.skills .skill-auto { flex: 0 0 auto; }

.skills li span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.projects {
  position: relative;
  margin: calc(-1 * var(--reveal)) var(--gutter) 0;
}

.projects-track {
  display: grid;
  gap: var(--gap);
}

.projects--horizontal {
  margin-inline: 0;
  margin-top: calc(-1 * (var(--reveal) + var(--gutter)));
}
.projects--horizontal .projects-viewport {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

.projects--horizontal .projects-track {
  --card-unit: calc((100svh - 2 * var(--gutter)) / 916);
  --project-gap: max(12px, calc(24 * var(--card-unit)));
  --caption-font: max(16px, calc(24 * var(--card-unit)));
  --caption-padding: max(10px, calc(16 * var(--card-unit)));
  --caption-space: calc(var(--caption-font) * 26.152 / 24 + 2 * var(--caption-padding));
  --art-height: calc(100svh - 2 * var(--gutter) - var(--project-gap) - var(--caption-space));
  display: flex;
  gap: 32px;
  height: 100%;
  padding: var(--gutter);
  will-change: transform;
}

.projects--horizontal .project {
  flex: 0 0 calc(var(--art-height) * 1392 / 841);
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  gap: var(--project-gap);
}

.projects--horizontal .project img {
  min-height: 0;
  object-fit: contain;
  object-position: center top;
  border-radius: max(8px, calc(24 * var(--card-unit)));
}

.projects--horizontal .project--watches > img {
  /* The Figma artwork is a top-aligned crop of a longer catalog screenshot. */
  object-fit: cover;
}

.projects--horizontal figcaption {
  margin-top: 0;
  padding: var(--caption-padding);
  border-radius: max(16px, calc(24 * var(--card-unit)));
  font-size: var(--caption-font);
  line-height: calc(26.152 / 24);
}

@supports (text-box-trim: trim-both) {
  .projects--horizontal .projects-track {
    --caption-space: calc(var(--caption-font) * 19 / 24 + 2 * var(--caption-padding));
  }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .socials a { transition: opacity 160ms ease; }
}

.project { min-width: 0; }
.project-preview { display: block; min-width: 0; }
.project img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1392 / 841;
  object-fit: cover;
  border-radius: max(8px, 1.666667vw);
}

.project--watches > img {
  object-position: center top;
}

figcaption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: max(12px, 2.222222vw);
  margin-top: var(--gap);
  padding: max(10px, 1.111111vw);
  border-radius: max(16px, 1.666667vw);
  background: #000;
  color: #fff;
  font-size: max(16px, 1.666667vw);
  font-weight: 300;
  line-height: calc(26.152 / 24);
}

figcaption span {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
figcaption span:last-child { text-align: right; }

.archive {
  --archive-unit: var(--design-unit);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows: calc(559 * var(--archive-unit)) calc(125 * var(--archive-unit)) 1fr;
  column-gap: var(--column-gap);
  padding-inline: var(--gutter);
  height: calc(1905 * var(--archive-unit));
}

.archive::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: calc(527 * var(--archive-unit));
  background: linear-gradient(to top, #eef2f9, #eef2f900);
  z-index: 3;
  pointer-events: none;
}

.archive h2 {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  align-self: end;
  margin-left: calc(-7 * var(--archive-unit));
  margin-bottom: calc(3 * var(--archive-unit));
  z-index: 4;
  pointer-events: none;
  color: #000;
  font-size: calc(243.209915 * var(--archive-unit));
  line-height: calc(401.296356 / 243.209915);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.collage {
  display: contents;
}

.archive-group {
  display: flex;
  flex-direction: column;
  align-self: start;
  gap: calc(32 * var(--archive-unit));
  min-width: 0;
}
.archive-group--top { grid-column: 1 / 7; grid-row: 1; }
.archive-group--bottom { grid-column: 1 / 11; grid-row: 3; }
.archive-group--right { grid-column: 11 / -1; grid-row: 2 / -1; }
.archive-group .archive-card { width: 100%; }

.archive-card {
  mix-blend-mode: luminosity;
  position: relative;
  align-self: start;
  min-width: 0;
  display: block;
  border-radius: 1.111111vw;
}

.archive-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.archive-card input {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.archive-card:has(input:checked) { z-index: 1; }
.archive-card:has(input:focus-visible) {
  mix-blend-mode: normal;
  z-index: 2;
  outline: 3px solid #000;
  outline-offset: 4px;
}

.archive-board { aspect-ratio: 502 / 307; border-radius: calc(8 * var(--archive-unit)); }
.archive-type { aspect-ratio: 857 / 529; }
.archive-city { aspect-ratio: 502 / 286; border-radius: calc(8 * var(--archive-unit)); }
.archive-reboot { aspect-ratio: 502 / 303; border-radius: calc(8 * var(--archive-unit)); }
.archive-studio { grid-column: 7 / -1; grid-row: 1; aspect-ratio: 858 / 527; }
.archive-editor { aspect-ratio: 501 / 307; border-radius: calc(8 * var(--archive-unit)); }
.archive-clean { aspect-ratio: 857 / 506; }
.archive-app { aspect-ratio: 501 / 313; border-radius: calc(8 * var(--archive-unit)); }
.archive-hr { aspect-ratio: 502 / 410; border-radius: calc(8 * var(--archive-unit)); }

.contact {
  position: relative;
  --contact-unit: min(var(--design-unit), calc(100svh / 900));
  --hero-unit: var(--contact-unit);
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: var(--columns);
  grid-template-rows: calc(367 * var(--contact-unit)) auto minmax(0, 1fr) auto;
  column-gap: var(--column-gap);
  padding: 0 var(--gutter) max(12px, calc(24 * var(--contact-unit)));
  background: #eef2f9;
  color: #000;
}
.contact-email {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.contact-email:focus-visible { outline-offset: -6px; }
.contact-title {
  grid-column: 1 / -1;
  grid-row: 1;
  align-self: start;
  margin-top: calc(24 * var(--contact-unit));
  margin-left: calc(-3 * var(--design-unit));
  font-size: calc(80 * var(--contact-unit));
  line-height: 1.1;
  font-weight: 300;
  white-space: nowrap;
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.contact-stat {
  grid-row: 2;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  justify-self: start;
  margin: 0;
}
.contact-stat--concept { grid-column: 1 / 4; }
.contact-stat--design { grid-column: 8 / 12; margin-left: calc(39 * var(--design-unit)); }
.contact-stat--build { grid-column: 14 / -1; justify-self: end; margin-right: calc(-7 * var(--design-unit)); }
.contact-stat dd {
  margin: 0;
  width: calc(67 * var(--contact-unit));
  font-size: calc(164.21 * var(--contact-unit));
  line-height: 1;
  font-weight: 300;
}
.contact-stat dt {
  width: calc(97 * var(--contact-unit));
  font-size: calc(30 * var(--contact-unit));
  line-height: calc(32 / 30);
  text-align: right;
  text-transform: uppercase;
}
.contact-stat dd, .contact-stat dt, .contact-about {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}
.contact-socials {
  grid-column: 1 / 8;
  grid-row: 4;
  align-self: end;
  text-transform: uppercase;
}
.contact-about {
  grid-column: 8 / -1;
  grid-row: 4;
  align-self: end;
  width: calc(765 * var(--design-unit));
  max-width: 100%;
  margin: 0 0 0 calc(2 * var(--design-unit));
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

@media (hover: none) {
  .archive-card:has(input:checked) { mix-blend-mode: normal; }
}

.project-cursor {
  display: none;
  position: fixed;
  z-index: 100;
  pointer-events: none;
  transform: translate(-100%, -100%);
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 158px;
  height: 51px;
  padding: 16px;
  border-radius: 24px;
  background: #000;
  color: #fff;
  font-size: 24px;
  font-weight: 300;
  line-height: calc(26.152 / 24);
  white-space: nowrap;
}
.project-cursor[data-kind="soon"] { width: 80px; }
.project-cursor[data-kind="email"] { width: 251px; gap: 10px; }
.project-cursor span { text-box-trim: trim-both; text-box-edge: cap alphabetic; }
.project-cursor img { display: block; flex: 0 0 24px; width: 24px; height: 24px; }
.project-cursor[data-kind="soon"] img { display: none; }
.project-cursor .cursor-email-icon { display: none; flex-basis: 26px; width: 26px; margin-inline: -1px; }
.project-cursor[data-kind="email"] .cursor-link-icon { display: none; }
.project-cursor[data-kind="email"] .cursor-email-icon { display: block; }
.project-cursor[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
  *, *::before, *::after { cursor: url("assets/cursor.svg") 1 1, auto; }
  .socials:has(a:hover) a:not(:hover) { opacity: .5; }
  .project-cursor { display: flex; }
  .archive-card:hover { mix-blend-mode: normal; }
}

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
    --mobile-unit: calc((100vw - 2 * var(--gutter)) / 370);
  }
  .hero {
    --hero-unit: min(var(--mobile-unit), calc((100svh - 2 * var(--gutter)) / 738));
    --hero-rail-height: calc(40 * var(--hero-unit));
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: calc(13 * var(--hero-unit)) calc(40 * var(--hero-unit))
      calc(78 * var(--hero-unit)) calc(40 * var(--hero-unit))
      calc(334 * var(--hero-unit)) calc(32 * var(--hero-unit))
      calc(59 * var(--hero-unit)) minmax(calc(56 * var(--hero-unit)), 1fr)
      calc(85.593 * var(--hero-unit));
    justify-content: center;
    align-content: stretch;
    gap: 0;
    padding: var(--gutter);
  }
  .header { grid-column: 1; grid-row: 1; }
  .socials {
    width: 100%;
    justify-content: space-between;
    gap: 0;
    font-size: calc(16 * var(--hero-unit));
  }
  .identity {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    justify-self: end;
    width: calc(183 * var(--hero-unit));
    gap: calc(12 * var(--hero-unit));
  }
  .identity p { font-size: calc(12 * var(--hero-unit)); }
  .identity-name { gap: calc(16 * var(--hero-unit)); }
  .wordmark { width: calc(109 * var(--hero-unit)); font-size: calc(32 * var(--hero-unit)); }
  .identity-portrait {
    flex-basis: calc(58 * var(--hero-unit));
    width: calc(58 * var(--hero-unit));
    height: calc(58 * var(--hero-unit));
  }
  .hero h1 {
    grid-column: 1;
    grid-row: 5;
    font-size: calc(88 * var(--hero-unit));
    line-height: 1;
    white-space: normal;
  }
  .hero-about p {
    grid-column: 1;
    grid-row: 7;
    width: 100%;
    margin: 0;
    font-size: calc(16 * var(--hero-unit));
    line-height: 1.5;
  }
  .hero-rule { display: none; }
  .skills {
    grid-column: 1;
    grid-row: 9;
    align-self: start;
    height: auto;
    flex-wrap: wrap;
    gap: calc(5.593 * var(--hero-unit)) 0;
    font-size: calc(16.78 * var(--hero-unit));
    line-height: calc(18.284 / 16.78);
  }
  .skills li { padding: 0; border-radius: calc(16.779 * var(--hero-unit)); }
  .skills li:nth-child(1) { flex: 0 0 calc(86 * var(--mobile-unit)); }
  .skills li:nth-child(2), .skills li:nth-child(4) { flex: 0 0 calc(61 * var(--mobile-unit)); }
  .skills li:nth-child(3) { flex: 0 0 calc(60 * var(--mobile-unit)); }
  .skills li:nth-child(5) { flex: 0 0 calc(102 * var(--mobile-unit)); }
  .skills li:nth-child(6) { flex: 0 0 calc(59 * var(--mobile-unit)); }
  .skills li:nth-child(n+7) { flex: 1 0 calc(155 * var(--mobile-unit)); }

  .projects { margin: 0; padding: 0 var(--gutter) var(--gutter); }
  .projects-track { gap: calc(8.506 * var(--mobile-unit)); }
  .project { display: grid; gap: calc(6.379 * var(--mobile-unit)); }
  .project img { border-radius: calc(6.379 * var(--mobile-unit)); }
  .project figcaption {
    margin: 0;
    padding: calc(8 * var(--mobile-unit)) calc(12 * var(--mobile-unit));
    gap: calc(8 * var(--mobile-unit));
    border-radius: calc(24 * var(--mobile-unit));
    font-size: calc(16 * var(--mobile-unit));
    line-height: 1.1;
  }

  .archive {
    --archive-unit: calc((100vw - 2 * var(--gutter)) / 1392);
    --column-gap: calc(32 * var(--archive-unit));
    height: calc(532 * var(--mobile-unit));
  }
  .archive-card { border-radius: calc(16 * var(--archive-unit)); }
  .archive-group--top .archive-card, .archive-group--right .archive-card {
    border-radius: calc(8 * var(--archive-unit));
  }
  .archive::after { height: calc(147.121 * var(--mobile-unit)); }
  .archive h2 {
    margin: 0;
    font-size: calc(64 * var(--mobile-unit));
    line-height: 1;
  }

  .contact {
    --contact-unit: min(var(--mobile-unit), calc((100svh - 2 * var(--gutter)) / 597));
    display: block;
    position: relative;
    padding: 0;
    background: #eff2f9;
  }
  .contact-title {
    position: absolute;
    left: var(--gutter);
    top: var(--gutter);
    margin: 0;
    font-size: calc(32 * var(--contact-unit));
    line-height: 1.25;
  }
  .contact-stat {
    position: absolute;
    top: calc(50% - 108.128 * var(--contact-unit));
  }
  .contact-stat--concept { left: var(--gutter); }
  .contact-stat--design { left: 50%; margin: 0; transform: translateX(-50%); }
  .contact-stat--build { right: var(--gutter); margin: 0; gap: calc(.494 * var(--contact-unit)); }
  .contact-stat dd { width: calc(33 * var(--contact-unit)); font-size: calc(81.107 * var(--contact-unit)); }
  .contact-stat dt { width: calc(47.911 * var(--contact-unit)); font-size: calc(14.818 * var(--contact-unit)); }
  .contact-about {
    position: absolute;
    left: var(--gutter);
    bottom: calc(var(--gutter) + 45 * var(--contact-unit));
    width: calc(203 * var(--contact-unit));
    margin: 0;
    font-size: calc(14 * var(--contact-unit));
    line-height: calc(20 / 14);
  }
  .contact-socials {
    position: absolute;
    left: var(--gutter);
    right: var(--gutter);
    bottom: var(--gutter);
    width: auto;
  }
}