:root {
  --bg: #ffffff;
  --card: #f3f3f3;
  --ink: #0a0f13;
  --mute: #5f6b74;
  --accent: #fff2d5;
  --dark: #212121;
  --line: rgba(10, 15, 19, .1);
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1072px;
  --gap: clamp(6px, 1vw, 12px);
  --r: clamp(20px, 2.7vw, 38px);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Arial, sans-serif;
}

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

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.4;
  overflow-x: hidden;
}

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

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 8px
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter)
}

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: calc(64px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}

.nav.scrolled {
  background: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--line)
}

.nav .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.brand {
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.02em
}

.nav-links {
  display: flex;
  gap: 28px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em
}

.nav-links a {
  color: var(--mute);
  transition: color .25s
}

.nav-links a:hover {
  color: var(--ink)
}

.case {
  width: 100%;
  max-width: calc(var(--max) + var(--gutter)*2);
  margin-inline: auto;
  padding: calc(64px + clamp(16px, 3vw, 36px) + env(safe-area-inset-top, 0px)) var(--gutter) 0;
  min-height: 70vh;
}

.head>*+* {
  margin-top: var(--gap)
}

.title-card {
  background: var(--card);
  border-radius: var(--r);
  text-align: center;
  padding: clamp(30px, 5.4vw, 62px) clamp(20px, 4vw, 48px);
}

.title-card h1 {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.15
}

.title-card p {
  margin: 10px auto 0;
  max-width: 46ch;
  color: var(--mute);
  font-size: clamp(15px, 1.2vw, 17px);
  letter-spacing: -.01em;
  text-wrap: balance
}

.meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap)
}

.meta.n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr))
}

.meta-card {
  background: var(--card);
  border-radius: var(--r);
  min-height: clamp(112px, 10.4vw, 148px);
  padding: clamp(16px, 1.7vw, 24px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.meta-card p {
  font-size: clamp(15px, 1.25vw, 18px);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.25
}

.pill {
  display: inline-flex;
  align-items: center;
  background: var(--accent);
  color: var(--ink);
  font-size: clamp(12px, .95vw, 14px);
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1;
  padding: 6px 12px;
  border-radius: 99px;
}

.meta-card.live {
  background: var(--accent);
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: clamp(15px, 1.3vw, 18px);
  font-weight: 600;
  letter-spacing: -.02em;
  gap: 8px;
  flex-direction: row;
  transition: filter .25s, transform .4s var(--ease);
}

.meta-card.live span {
  display: inline-block;
  transition: transform .4s var(--ease)
}

.meta-card.live:hover {
  filter: brightness(.96)
}

.meta-card.live:hover span {
  transform: translate(3px, -3px)
}

/* Text blocks */
.prose {
  max-width: 700px;
  margin-inline: auto;
  padding-block: clamp(36px, 4.6vw, 66px)
}

.prose+.prose {
  padding-top: 0
}

.prose h2 {
  font-size: clamp(20px, 1.75vw, 24px);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin-bottom: clamp(16px, 2vw, 28px)
}

.prose p {
  font-size: clamp(16px, 1.36vw, 19px);
  line-height: 1.65;
  letter-spacing: -.012em;
  text-wrap: pretty
}

.prose p+p {
  margin-top: 1em
}

.prose ol {
  margin-top: 1.5em;
  padding-left: 1.7em;
  font-size: clamp(16px, 1.36vw, 19px);
  line-height: 1.65;
  letter-spacing: -.012em
}

.prose li {
  padding-left: .3em;
  margin-bottom: 1.05em;
  text-wrap: pretty
}

.prose li:last-child {
  margin-bottom: 0
}

.prose li::marker {
  font-variant-numeric: tabular-nums
}

/* Media panels */
.mw+.mw {
  margin-top: var(--gap)
}

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r);
  container-type: inline-size;
  background: linear-gradient(160deg, #f6f7f9, #e3e8ee);
  color: var(--ink);
  --panel: #e9edf2;
}

.media.full {
  aspect-ratio: 632/362
}

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

div.pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap)
}

div.pair.story {
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 16px
}

div.pair.tight {
  grid-template-columns: auto auto;
  justify-content: center;
  gap: 16px
}

div.pair.tight .media.bare {
  width: auto
}

.media.pair {
  aspect-ratio: 312/363
}

.media.pair.story {
  aspect-ratio: 9/16;
  width: min(220px, 42vw);
  margin: 0
}

.media[data-tone="light"] {
  background: linear-gradient(160deg, #fbfbfc, #eceff3);
  color: var(--ink);
  --panel: #f1f3f6
}

.media[data-tone="warm"] {
  background: linear-gradient(160deg, #fbf6ec, #efe4d0);
  color: var(--ink);
  --panel: #f4ead8
}

/* Bare media: the image already stands on its own (its own shadow/edges),
   no panel background, no crop, no forced aspect-ratio. */
.media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.media.bare {
  background: transparent;
  border-radius: 0;
  aspect-ratio: auto;
  container-type: normal
}

/* Higher-specificity than any .media.full/.media.pair aspect-ratio rule
   (including their @media overrides), so bare media never gets force-cropped
   by a fixed box ratio on any screen size. */
.media.full.bare,
.media.pair.bare {
  aspect-ratio: auto
}

.media.bare img,
.media.bare video {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 480px;
  object-fit: contain;
  border-radius: var(--r);
  margin: 0 auto
}


/* Placeholder phone */
.ph {
  position: absolute;
  aspect-ratio: 9/18.5;
  container-type: inline-size
}

.scr {
  width: 100%;
  height: 100%;
  background: #fff;
  color: var(--ink);
  border-radius: 12cqw;
  overflow: hidden;
  padding: 7cqw 8cqw;
  display: flex;
  flex-direction: column;
  gap: 6cqw;
  box-shadow: 0 0 0 1.8cqw #050505, 0 0 0 2.3cqw rgba(255, 255, 255, .1), 0 12cqw 22cqw -8cqw rgba(0, 0, 0, .45);
}

.ph.c1 {
  left: 38.5%;
  top: 9%;
  width: 23%
}

.ph.l2 {
  left: 28%;
  top: 8%;
  width: 21%
}

.ph.r2 {
  left: 51%;
  top: 22%;
  width: 21%
}

.ph.s3l {
  left: 24%;
  top: 20%;
  width: 19%;
  transform: rotate(-9deg)
}

.ph.s3r {
  left: 57%;
  top: 20%;
  width: 19%;
  transform: rotate(9deg)
}

.ph.s3c {
  left: 40%;
  top: 8%;
  width: 20%;
  z-index: 2
}

.ph.crop {
  left: 21%;
  top: 11%;
  width: 58%
}

.ph.tilt {
  left: 38.5%;
  top: 8%;
  width: 23%;
  transform: rotate(-12deg)
}

.notch {
  align-self: center;
  width: 34%;
  height: 6cqw;
  background: #050505;
  border-radius: 99px;
  flex: none
}

.bl {
  display: block;
  height: 4cqw;
  border-radius: 99px;
  background: #e6eaee;
  flex: none
}

.bl.w30 {
  width: 30%
}

.bl.w40 {
  width: 40%
}

.bl.w60 {
  width: 60%
}

.bl.w80 {
  width: 80%
}

.bl.s {
  height: 3cqw
}

.bal {
  background: #14181c;
  border-radius: 8cqw;
  padding: 10cqw 9cqw;
  display: flex;
  flex-direction: column;
  gap: 5cqw;
  flex: none
}

.bal.sm {
  padding: 8cqw 9cqw;
  gap: 4cqw
}

.bal .bl {
  background: rgba(255, 255, 255, .26)
}

.bal .bl.big {
  height: 9cqw;
  background: #fff;
  width: 64%
}

.bal .tag {
  display: block;
  width: 24%;
  height: 6cqw;
  border-radius: 99px;
  background: var(--accent)
}

.acts {
  display: flex;
  justify-content: space-between;
  flex: none
}

.acts i {
  width: 16cqw;
  height: 16cqw;
  border-radius: 50%;
  background: #eef1f4
}

.row {
  display: flex;
  align-items: center;
  gap: 6cqw;
  flex: none
}

.row>i {
  width: 14cqw;
  height: 14cqw;
  border-radius: 4cqw;
  background: #eef1f4;
  flex: none
}

.row .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3cqw
}

.row .bl {
  height: 3.4cqw
}

.row .bl.amt {
  width: 12cqw
}

.bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 34cqw;
  flex: none;
  padding-top: 4cqw
}

.bars i {
  width: 8cqw;
  border-radius: 2cqw;
  background: #e6eaee
}

.bars i.hi {
  background: var(--ink)
}

.field {
  display: flex;
  flex-direction: column;
  gap: 3cqw;
  padding-bottom: 4cqw;
  border-bottom: .6cqw solid #e6eaee;
  flex: none
}

.btn {
  height: 13cqw;
  border-radius: 4cqw;
  background: var(--ink);
  margin-top: auto;
  flex: none
}

/* Placeholder ecosystem art */
.orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid color-mix(in srgb, currentColor 24%, transparent)
}

.orbit.o1 {
  width: 30cqw;
  height: 30cqw
}

.orbit.o2 {
  width: 50cqw;
  height: 50cqw;
  border-style: dashed
}

.core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12cqw;
  height: 12cqw;
  transform: translate(-50%, -50%);
  border-radius: 28%;
  background: var(--accent);
  display: grid;
  place-items: center;
  box-shadow: 0 3cqw 6cqw -2cqw rgba(0, 0, 0, .4)
}

.core i {
  width: 4.4cqw;
  height: 4.4cqw;
  border-radius: 50%;
  border: .8cqw solid var(--ink)
}

.node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: .6em;
  padding: .5em 1.1em .5em .5em;
  background: #fff;
  color: var(--ink);
  border-radius: 99px;
  font-size: max(11px, 1.9cqw);
  font-weight: 500;
  letter-spacing: -.02em;
  white-space: nowrap;
  box-shadow: 0 1.4cqw 3.4cqw -1cqw rgba(0, 0, 0, .35)
}

.node i {
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--ink);
  display: block
}

.node.n2 i {
  background: var(--accent)
}

.node.n1 {
  left: 22%;
  top: 26%
}

.node.n2 {
  right: 22%;
  bottom: 26%
}

.pt {
  position: absolute;
  border-radius: 50%;
  background: currentColor
}

.pt.p1 {
  width: 1.3cqw;
  height: 1.3cqw;
  right: 30%;
  top: 24%
}

.pt.p2 {
  width: .9cqw;
  height: .9cqw;
  left: 31%;
  bottom: 22%;
  opacity: .5
}

/* Placeholder identity art */
.bento {
  position: absolute;
  inset: 11% 21%;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  grid-template-rows: 1.1fr 1fr;
  gap: max(6px, 1.4cqw)
}

.media.pair .bento {
  inset: 15% 9%
}

.bento>div {
  border-radius: max(10px, 2.2cqw);
  overflow: hidden;
  position: relative
}

.b1 {
  grid-row: span 2;
  background: currentColor;
  display: flex;
  align-items: flex-end;
  padding: max(10px, 2.4cqw)
}

.b1 span {
  font-size: max(44px, 15cqw);
  font-weight: 600;
  letter-spacing: -.06em;
  line-height: .8;
  color: var(--panel)
}

.media.pair .b1 span {
  font-size: max(34px, 17cqw)
}

.b2 {
  background: #fff;
  display: flex
}

.b2 i {
  flex: 1
}

.b2 i:nth-child(1) {
  background: var(--ink)
}

.b2 i:nth-child(2) {
  background: #8a939c
}

.b2 i:nth-child(3) {
  background: #cfd7de
}

.b2 i:nth-child(4) {
  background: #fff
}

.b3 {
  background: #fff
}

.b3::before {
  content: "";
  position: absolute;
  left: 14%;
  top: 18%;
  width: 44%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--ink)
}

.b3::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 16%;
  width: 38%;
  aspect-ratio: 1;
  border-radius: 50% 0 50% 0;
  background: var(--accent)
}

/* Next project */
.next-card {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 56px);
  align-items: flex-start;
  background: var(--card);
  border-radius: var(--r);
  padding: clamp(18px, 2vw, 28px);
  margin-top: var(--gap);
  transition: background .35s var(--ease);
}

.next-row {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px
}

.next-title {
  font-size: clamp(34px, 6vw, 80px);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1
}

.next-arrow {
  font-size: clamp(26px, 4vw, 52px);
  font-weight: 500;
  transition: transform .45s var(--ease)
}

.next-card:hover {
  background: var(--accent)
}

.next-card:hover .next-arrow {
  transform: translate(6px, -6px)
}

.next-card:hover .pill {
  background: var(--ink);
  color: #fff
}

.pill {
  transition: background .3s, color .3s
}

/* Footer */
.foot {
  width: min(100% - var(--gutter)*2, var(--max));
  margin: clamp(48px, 7vw, 96px) auto 0;
  padding: 22px 0 max(32px, env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--mute);
}

/* Motion */
.rise {
  animation: rise .9s var(--ease) both;
  animation-delay: var(--d, 0s)
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(20px)
  }
}

.rv {
  transition: opacity .9s var(--ease), transform .9s var(--ease)
}

.js .rv:not(.in) {
  opacity: 0;
  transform: translateY(28px)
}

/* Responsive */
@media (max-width:820px) {

  .meta,
  .meta.n3 {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }

  .meta.n3 .meta-card:last-child {
    grid-column: span 2
  }

  .meta-card {
    min-height: 104px
  }

  .media.full {
    aspect-ratio: 4/3
  }

  .media.bare img,
  .media.bare video {
    /* max-height: 360px */
  }

  .nav-links {
    gap: 22px
  }
}

@media (max-width:560px) {
  div.pair {
    grid-template-columns: 1fr
  }

  .media.pair {
    aspect-ratio: 1/1.05
  }

  .ph.crop {
    left: 24%;
    width: 52%;
    top: 10%
  }

  .foot {
    flex-direction: column;
    gap: 4px
  }
}

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto
  }

  .rise {
    animation: none
  }

  .js .rv:not(.in) {
    opacity: 1;
    transform: none
  }

  *,
  *::before,
  *::after {
    transition-duration: .001ms !important
  }
}