/* fh.design — static rebuild of the Framer site. All measurements are taken from the live site. */

@font-face {
  font-family: "Suisse Int'l Medium";
  src: url("/fonts/do6kPKhFKFxVqY3xfYZQwHKzcY.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l Medium";
  src: url("/fonts/do6kPKhFKFxVqY3xfYZQwHKzcY.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l Book";
  src: url("/fonts/34yjpF6KLCa5W8GT5VjMPHWBdkQ.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l Regular";
  src: url("/fonts/L3CN4MLCZQeuh9BjpUboN92cIXE.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  --bg: #f2f2f7;
  --text: #000;
  --muted: #808080;
  --label: rgba(0, 0, 0, 0.5);
  --faint: rgba(0, 0, 0, 0.3);
  --blue: #007aff;
  --link: #0099ff;
  --cta: #0173f0;
  --pill-hover: #e7e8f2;
  --card-border: #e9e9ef;
  --medium: "Suisse Int'l Medium", sans-serif;
  --book: "Suisse Int'l Book", sans-serif;
  --regular: "Suisse Int'l Regular", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  padding: 64px 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.2 var(--medium);
}
h1, h2, h3, h4, h5, p { margin: 0; font-size: inherit; font-weight: 400; }
a { color: inherit; text-decoration: none; }
img { display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* ---------- Card shell ---------- */

.card {
  width: 503px;
  margin: 0 auto;
  padding: 32px;
  background: #fff;
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 32px;
  will-change: transform; /* as on the live site: keeps text rendering identical at the card's half-pixel offset */
}

@media (max-width: 559.98px) {
  body { background: #fff; padding: 0; }
  .card { width: auto; padding: 64px 24px; border-radius: 0; overflow: visible; }
}

/* ---------- Shared pieces ---------- */

.label { font-size: 14px; line-height: 18px; color: var(--label); }
.section { display: flex; flex-direction: column; gap: 16px; }
.list { display: flex; flex-direction: column; gap: 16px; }

.row { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.row .logo { width: 56px; height: 56px; flex: none; border-radius: 16px; object-fit: cover; }
.row .logo.square { border-radius: 0; }
.row .logo.fill { object-fit: fill; }
.row-text { flex: 1; min-width: 0; margin-right: 4px; }
.row h3 { font-size: 16px; line-height: 21px; }
.row h4 { font: 14px/18px var(--book); color: var(--muted); margin-top: 3px; }
/* Row text stays on one line, like on the Framer site. */
.row h3, .row h4 { white-space: nowrap; }

.pill {
  flex: none;
  width: 80px;
  height: 38px;
  border-radius: 30px;
  background: var(--bg);
  color: var(--blue);
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}
.pill.soon { opacity: 0.5; color: var(--text); }
/* Elements that only exist in one breakpoint variant on the live site. */
@media (max-width: 559.98px) { .wide-only { display: none !important; } }
@media (min-width: 560px) { .phone-only { display: none !important; } }

@media (pointer: fine) {
  a.pill:hover { background: var(--pill-hover); }
}

.page-header { display: flex; align-items: center; justify-content: space-between; min-height: 72px; }
.page-title p { font-size: 30px; line-height: 36px; }
.page-title .sub { color: var(--faint); }
.close {
  flex: none;
  width: 42px;
  height: 42px;
  margin-right: 4px;
  border-radius: 50%;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
}
.close a, a.close > svg { display: flex; }
.close a { width: 24px; height: 24px; align-items: center; justify-content: center; }

.back-home {
  position: relative;
  align-self: center;
  width: 178px;
  height: 60px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  font-size: 16px;
  line-height: 19.2px;
}
.back-home::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--blue);
  border-radius: inherit;
  pointer-events: none;
}

/* ---------- Investments ---------- */

.list-wide .row { gap: 16px; }
.list-wide .row-text { margin-right: 0; }
.list-wide .row h4 { margin-top: 4px; }

/* ---------- Collaborations ---------- */

.collaborations .year-2024 { margin-top: -16px; }

/* ---------- About ---------- */

.about .page-header { height: 78px; }
.about-photo { position: relative; height: 515px; border-radius: 20px; overflow: hidden; }
.about-photo img { position: absolute; left: 0; top: -1px; width: 100%; height: 516px; object-fit: fill; }
.about-text p, .about-more { font: 18px/37px var(--regular); }
.about-text p + p { margin-top: 37px; }
.about-more { margin-top: 3px; }
.about-more a { color: var(--link); }

@media (max-width: 559.98px) {
  .about-photo img { object-fit: cover; }
}

/* ---------- Home ---------- */

.home .card { padding-bottom: 32px; }

.profile { display: flex; align-items: center; justify-content: space-between; min-height: 75px; }
.profile h1, .profile p { font-size: 30px; line-height: 36px; }
.profile p { margin-top: 3px; color: var(--faint); }
.avatar { flex: none; width: 63px; height: 63px; border-radius: 50%; overflow: hidden; box-shadow: 0 1.13px 2px rgba(0, 0, 0, 0.25); }
.avatar img { width: 100%; height: 100%; }

.carousel { position: relative; height: 264px; }
.slides {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 20px;
}
.slides::-webkit-scrollbar { display: none; }
.slide {
  position: relative;
  flex: 0 0 100%;
  height: 240px;
  scroll-snap-align: center;
  border-radius: 20px;
  overflow: hidden;
  background: #fff;
}
.slide-media { position: absolute; inset: 0; isolation: isolate; border-radius: 20px; overflow: hidden; }
.slide-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-media > img.fill { object-fit: fill; }
.slide-media > img.bottom { object-position: 50% 100%; }

/* Progressive blur. The layers are deliberately not isolated: like on the live site, layers 2-8
   stack above the photo that follows them, so the photo's lower edge is blurred too. */
.pblur { position: absolute; left: 0; right: 0; bottom: 0; }
.pblur i { position: absolute; inset: 0; border-radius: 20px; }
.pblur i:nth-child(1) { -webkit-backdrop-filter: blur(0.5px); backdrop-filter: blur(0.5px); --m: linear-gradient(transparent 0%, #000 12.5%, #000 25%, transparent 37.5%); }
.pblur i:nth-child(2) { z-index: 2; -webkit-backdrop-filter: blur(0.5625px); backdrop-filter: blur(0.5625px); --m: linear-gradient(transparent 12.5%, #000 25%, #000 37.5%, transparent 50%); }
.pblur i:nth-child(3) { z-index: 3; -webkit-backdrop-filter: blur(1.125px); backdrop-filter: blur(1.125px); --m: linear-gradient(transparent 25%, #000 37.5%, #000 50%, transparent 62.5%); }
.pblur i:nth-child(4) { z-index: 4; -webkit-backdrop-filter: blur(2.25px); backdrop-filter: blur(2.25px); --m: linear-gradient(transparent 37.5%, #000 50%, #000 62.5%, transparent 75%); }
.pblur i:nth-child(5) { z-index: 5; -webkit-backdrop-filter: blur(4.5px); backdrop-filter: blur(4.5px); --m: linear-gradient(transparent 50%, #000 62.5%, #000 75%, transparent 87.5%); }
.pblur i:nth-child(6) { z-index: 6; -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); --m: linear-gradient(transparent 62.5%, #000 75%, #000 87.5%, transparent 100%); }
.pblur i:nth-child(7) { z-index: 7; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); --m: linear-gradient(transparent 75%, #000 87.5%, #000 100%); }
.pblur i:nth-child(8) { z-index: 8; -webkit-backdrop-filter: blur(36px); backdrop-filter: blur(36px); --m: linear-gradient(transparent 87.5%, #000 100%); }
.pblur i { -webkit-mask-image: var(--m); mask-image: var(--m); }
.slide-bar { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 17px; height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.slide-text { flex: 1 1 0; min-width: 0; white-space: nowrap; }
.slide-title { font-size: 16px; line-height: 19.2px; color: #fff; }
.slide-sub { margin-top: 3px; font-size: 14px; line-height: 16.8px; color: rgba(255, 255, 255, 0.5); }
.slide-podcast .slide-title { font-size: 18px; line-height: 21.6px; }
.cta {
  flex: none;
  width: 99px;
  height: 38px;
  border-radius: 20px;
  background: var(--cta);
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease;
}

.dots { position: absolute; left: 50%; bottom: 0; display: flex; gap: 6px; transform: translateX(-50%); }
.dots button { display: block; width: 6px; height: 6px; }
.dots span { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--label); opacity: 0.5; transition: opacity 0.2s ease; }
.dots [aria-current] span { opacity: 1; }

.section-head { display: flex; align-items: center; justify-content: space-between; height: 20px; }
.more { display: flex; }

.res-strip {
  display: flex;
  gap: 16px;
  margin: 0 -32px;
  padding: 0 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.res-strip::-webkit-scrollbar { display: none; }
.res-card {
  position: relative;
  flex: none;
  width: 211px;
  height: 236px;
  padding-top: 19px;
  border-radius: 20px;
  background: var(--bg);
  overflow: hidden;
  text-align: center;
}
.res-card.lg { width: 212px; height: 237px; }
.res-card::after { content: ""; position: absolute; inset: 0; border: 1px solid var(--card-border); border-radius: inherit; pointer-events: none; }
.res-tag { font-size: 14px; line-height: 16.8px; color: var(--blue); }
.res-tag.hidden { opacity: 0; }
.res-title { margin-top: 4px; font-size: 25px; line-height: 30px; }
.res-sub { font-size: 16px; line-height: 19.2px; color: var(--faint); }
.res-sub.left { width: 130px; margin: 0 auto; text-align: left; white-space: nowrap; }
.res-art { position: absolute; transition: transform 0.3s ease; }
.res-art img { object-fit: cover; }
.res-art.letters { left: 13px; top: 109px; width: 184px; height: 146px; overflow: hidden; }
.res-art.letters img { position: absolute; left: 6.5px; top: 8.9px; width: 171px; height: 128.2px; }
.res-art.letters .tilted { transform: rotate(6deg); }
.res-art.collabs { left: 24px; top: 110px; }
.res-art.collabs img { width: 164px; height: 99px; }
.res-art.favs { left: -50px; top: 114px; width: 311px; height: 99px; }
.res-art.favs img { position: absolute; top: 0; width: 98px; height: 98px; object-fit: contain; }
.res-art.favs img:nth-child(1) { left: 0; }
.res-art.favs img:nth-child(2) { left: 106px; }
.res-art.favs img:nth-child(3) { left: 213px; top: 1px; }

.contact-row { display: flex; align-items: center; justify-content: space-between; }
.contact-row h3 { font-size: 16px; line-height: 21px; }
a.contact-row { height: 24px; }

.footer { display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 16px; line-height: 18px; }
.footer a { color: var(--link); transition: color 0.2s ease; }

@media (max-width: 559.98px) {
  .home .card { padding: 64px 20px; }
  .carousel { height: 260px; }
  .res-strip { margin: 0 -20px; padding: 0 20px; }
}

@media (max-width: 389.98px) {
  .home .profile { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .home .avatar { width: 58px; height: 58px; }
}

/* ---------- Hover (pointer devices only, like the live site) ---------- */

@media (pointer: fine) {
  .investments a.pill:hover, .favs a.pill:hover, .collaborations a.pill:hover { background: rgba(210, 210, 228, 0.5); }
  .back-home { transition: background-color 0.2s ease, color 0.2s ease; }
  .back-home:hover { background: var(--blue); color: #fff; }
  .close a, a.close { transition: transform 0.2s ease; }
  .close a:hover, a.close:hover { transform: scale(1.05); }
  .cta:hover { background: #015cbd; }
  .footer a:hover, .about-more a:hover { color: #0088ff; }
  .res-card:hover .letters, .res-card:hover .collabs { transform: scale(1.05); }
}

/* ---------- Favs ---------- */

.favs-title { font-size: 30px; line-height: 36px; }
.favs-title .sub { display: block; color: var(--faint); }

.favs-grid { display: grid; grid-template-columns: 212px 211.5px; gap: 16px 15.5px; }
.fav { height: 260px; }
.fav-tile { position: relative; height: 212px; border-radius: 20px; background: #f9f9f9; }
.fav-img { position: absolute; }
.fav h3 { margin: 7px 0 0 2px; font-size: 16px; line-height: 21px; }
.fav h4 { margin: 1.5px 0 0 2px; font: 14px/18px var(--book); color: var(--muted); }
.fav h3, .fav h4 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.books { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.books::-webkit-scrollbar { display: none; }
.book { position: relative; flex: none; width: 160px; height: 240px; }
.book img, .book a { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0 2px 2px 0; object-fit: cover; }
.book .book-cover.fill, .book img.spine, .book img.spine-hi { object-fit: fill; }
.book .spine, .book .spine-hi { position: absolute; top: 0; left: 4px; width: 2px; height: 100%; }
.book .spine-hi { left: 6px; width: 1px; }
.spine.light { background: rgba(208, 204, 202, 0.5); }
.spine-hi.light { background: rgba(255, 255, 255, 0.5); }
.spine.dark { background: #000; }
.spine-hi.dark { background: rgba(255, 255, 255, 0.4); border-radius: 0 2px 2px 0; }

@media (max-width: 559.98px) {
  .favs-title { max-width: 282px; }
  .favs-title .sub { display: inline; }
  .favs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .fav { height: 211px; }
  .fav-tile { height: 163px; }
}

@media (max-width: 359.98px) {
  .fav-tile { overflow: hidden; }
}

/* ---------- Page transition ----------
   Like the Framer site: the old page disappears, the new card fades in and springs up from +150px
   (measured on the live site: ~200ms fade, ~400ms spring with a 2px overshoot). */

@view-transition { navigation: auto; }
.card { view-transition-name: card; }
::view-transition-group(card), ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(card) { animation: none; opacity: 0; }
::view-transition-new(card) { animation: card-in 400ms linear both; }
@keyframes card-in {
  0% { opacity: 0; transform: translateY(150px); }
  12.5% { opacity: 0.34; transform: translateY(98px); }
  25% { opacity: 0.74; transform: translateY(38px); }
  37.5% { opacity: 0.95; transform: translateY(8px); }
  50% { opacity: 1; transform: translateY(-1.4px); }
  62.5% { transform: translateY(-2.1px); }
  75% { transform: translateY(-1.1px); }
  87.5% { transform: translateY(-0.4px); }
  100% { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-new(card) { animation: none; }
}