@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/23-applied-metabolics/fonts/instrument-serif.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Instrument Serif";
  src: url("/assets/23-applied-metabolics/fonts/instrument-serif-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("/assets/23-applied-metabolics/fonts/dm-sans.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/23-applied-metabolics/fonts/ibm-plex-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --orange: #fd6502;
  --paper: #eee9df;
  --ink: #252421;
  --dark: #242320;
  --soft: #c6bdb0;
  --sans: "DM Sans", sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
  --gutter: 64px;
  --pad-bottom: 36px;
  --fade: clamp(220px, 46vh, 500px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

* { box-sizing: border-box; }

body {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  margin: 0;
  padding: 34px var(--gutter) var(--pad-bottom);
  background: #000;
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: url("/assets/23-applied-metabolics/grain.svg");
  opacity: .14;
  mix-blend-mode: soft-light;
}

.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.backdrop, .shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.backdrop { object-fit: cover; object-position: center; }

.shade {
  background: linear-gradient(90deg, rgba(21, 19, 16, .8), rgba(21, 19, 16, .1) 78%),
    linear-gradient(0deg, rgba(19, 18, 16, .92), transparent 62%);
}

p, h1 { margin: 0; }
img { display: block; max-width: 100%; }
::selection { background: var(--orange); color: var(--dark); }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 5px; }

.mono {
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1.6;
}

.location { display: flex; align-items: center; gap: 10px; color: #e3dace; }
.location > span { flex-shrink: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }

main {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: clamp(40px, 7vh, 72px) 0 clamp(48px, 8vh, 88px);
}

h1 {
  font-family: var(--serif);
  font-size: clamp(48px, min(8.4vw, 11.4vh), 136px);
  font-weight: 400;
  line-height: .94;
  letter-spacing: -.012em;
}

h1 .line { display: block; }
h1 .emphasis { font-family: var(--sans); font-weight: 700; letter-spacing: -.02em; }

.lede {
  max-width: 34em;
  margin-top: 34px;
  color: #eee8dc;
  font-size: 17px;
  line-height: 1.6;
  text-wrap: pretty;
}

.nowrap { white-space: nowrap; }

.notify {
  display: flex;
  align-items: center;
  gap: 24px;
  margin-top: 34px;
}

.notify .mono { color: var(--soft); }

.button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  min-height: 52px;
  padding: 15px 22px;
  border: 1px solid rgba(238, 233, 223, .36);
  background: rgba(20, 18, 16, .34);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}

.button svg {
  flex-shrink: 0;
  fill: none;
  stroke: var(--orange);
  stroke-width: 1.5;
  transition: transform .18s ease;
}

.button:hover { border-color: rgba(238, 233, 223, .72); background: rgba(238, 233, 223, .1); }
.button:hover svg { transform: translate(2px, -2px); }

/* Fades the artwork into true black so the lockup sits on #000. */
footer { position: relative; }

footer::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--fade));
  right: calc(-1 * var(--gutter));
  bottom: calc(-1 * var(--pad-bottom));
  left: calc(-1 * var(--gutter));
  background: linear-gradient(#0000, #00000007 calc(var(--fade) * .1), #0000001b calc(var(--fade) * .2),
    #00000037 calc(var(--fade) * .3), #0000005a calc(var(--fade) * .4), #00000080 calc(var(--fade) * .5),
    #000000a5 calc(var(--fade) * .6), #000000c8 calc(var(--fade) * .7), #000000e4 calc(var(--fade) * .8),
    #000000f8 calc(var(--fade) * .9), #000 calc(var(--fade) - 20px));
  pointer-events: none;
}

.lockup { width: 100%; height: auto; }

.footnote {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 22px;
  color: var(--soft);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: no-preference) {
  .backdrop { animation: settle 2.6s var(--ease) both; }
  h1 .line, .lede, .notify { animation: rise .9s var(--ease) both; }
  h1 .line:nth-child(2) { animation-delay: .1s; }
  h1 .emphasis { animation-delay: .55s; }
  .lede { animation-delay: .8s; }
  .notify { animation-delay: .9s; }
}

@keyframes settle {
  from { opacity: .5; transform: scale(1.06); }
}

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

@media (min-width: 1600px) {
  :root { --gutter: 80px; }
  .lede { font-size: 18px; }
}

@media (min-width: 701px) and (max-height: 880px) {
  :root { --pad-bottom: 26px; }
  body { padding-top: 26px; }
  main { padding: 28px 0 40px; }
  h1 { font-size: clamp(48px, min(8.4vw, 10.6vh), 136px); }
  .lede { margin-top: 24px; }
  .notify { margin-top: 26px; }
}

@media (max-width: 900px) {
  :root { --gutter: 40px; }
  h1 { font-size: clamp(48px, min(10.8vw, 11.4vh), 136px); }
  .shade {
    background: linear-gradient(90deg, rgba(21, 19, 16, .78), rgba(21, 19, 16, .4)),
      linear-gradient(0deg, rgba(19, 18, 16, .94), transparent 55%);
  }
}

@media (max-width: 700px) {
  :root { --gutter: 22px; --pad-bottom: 26px; --fade: 34vh; }
  body { padding-top: 24px; }
  .backdrop { object-position: 62% center; }
  .shade {
    background: linear-gradient(90deg, rgba(19, 17, 15, .66), rgba(19, 17, 15, .42)),
      linear-gradient(0deg, rgba(19, 17, 15, .96), transparent 50%);
  }
  main { padding: 64px 0 60px; }
  h1 { font-size: clamp(50px, 15.4vw, 84px); line-height: .93; }
  .lede { margin-top: 26px; font-size: 15px; line-height: 1.65; }
  .notify { flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 30px; }
  .button { font-size: 13px; }
  .notify .mono { font-size: 9px; }
  .footnote { flex-direction: column; gap: 6px; padding-top: 18px; font-size: 9px; }
}