@font-face { font-family: "Instrument Serif"; src: url(/fonts/instrument-serif-latin-400-normal.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Instrument Serif"; font-style: italic; src: url(/fonts/instrument-serif-latin-400-italic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Inter Tight"; src: url(/fonts/inter-tight-latin-400-normal.woff2) format("woff2"); font-display: swap; }

:root {
  --pink: #f4c2cb;
  --blush: #fbe8ec;
  --ink: #3a2a30;
  --size: 1920;
  --pad: 5rem;
  --expo: cubic-bezier(.19, 1, .22, 1);
  --p3: cubic-bezier(.215, .61, .355, 1);
}
@media (orientation: portrait) { :root { --size: 1000; } }
@media (orientation: portrait) and (max-width: 550px) { :root { --size: 750; --pad: 3rem; } }
@media (orientation: portrait) and (max-width: 440px) { :root { --size: 500; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: calc(100vw / var(--size) * 10); }
html, body { height: 100%; overflow: hidden; }
body {
  background: #fff;
  color: var(--ink);
  font: 400 1.8rem/1.1 "Inter Tight", system-ui, sans-serif;
  letter-spacing: -.025em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
em { font-style: italic; }
button { font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ol { list-style: none; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; }
.mask { position: fixed; inset: 0; background: var(--pink); z-index: 1; }
body:not(.is-loading) .mask { display: none; }

/* film grain, over everything */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  z-index: 100;
  pointer-events: none;
  opacity: .09;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .5s steps(5) infinite;
}
@keyframes grain {
  20% { transform: translate(-7%, 4%); }
  40% { transform: translate(5%, -9%); }
  60% { transform: translate(-3%, 8%); }
  80% { transform: translate(9%, 2%); }
}

/* line reveal, used by cards and panels */
.ln { display: block; overflow: clip; padding-bottom: .22em; margin-bottom: -.22em; }
.ln > span { display: block; transform: translateY(135%); transition: transform .5s var(--p3); }
.is-in .ln > span { transform: none; transition: transform 1s var(--expo) calc(var(--i, 0) * 60ms + var(--delay, 0ms)); }

.ul { position: relative; display: inline-block; }
.ul::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s var(--expo);
}
@media (hover: hover) { .ul:hover::after, .card:hover .ul::after { transform: scaleX(1); } }
.ul:focus-visible::after { transform: scaleX(1); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

/* grid cards: positioned by JS over their WebGL cell */
.cards { position: fixed; inset: 0; z-index: 2; pointer-events: none; transition: opacity .3s; }
.is-open .cards { opacity: 0; visibility: hidden; }
.card {
  position: absolute;
  top: 0; left: 0;
  width: var(--cw); height: var(--ch);
  padding: var(--pad);
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  will-change: transform;
}
.card__name { padding-bottom: .1em; font: 400 9rem/.8 "Instrument Serif", serif; letter-spacing: -.04em; text-transform: none; }
.card__text { margin-top: auto; font-size: 1.6rem; max-width: 30em; }
.card__link { align-self: flex-start; margin-top: 2.5rem; font-size: 1.6rem; }
.card__link::before { content: ""; position: absolute; inset: -100vh; } /* whole card is the hit area */
.card { overflow: clip; }
.card--profile .card__name { font-size: 9.5rem; }
.is-intro .card:not(.card--profile) { visibility: hidden; }

/* panels */
.panel {
  position: fixed;
  inset: 0;
  z-index: 10;
  padding: var(--pad);
  display: grid;
  grid-template-columns: 1fr 1.25fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: var(--pad);
  visibility: hidden;
  overflow-y: auto;
  touch-action: pan-y;
}
.panel.is-open { visibility: visible; }
.panel__title { grid-column: 1 / 3; font: 400 16.5vw/.8 "Instrument Serif", serif; text-transform: none; letter-spacing: .12em; transition: letter-spacing .6s var(--p3); }
.panel.is-in .panel__title { letter-spacing: -.04em; transition: letter-spacing 1.6s var(--expo); }
.panel__body { grid-column: 2; grid-row: 2; align-self: start; margin-top: 5rem; }
.panel__body p { margin-top: 2em; max-width: 34em; }
.panel__art { grid-column: 3; grid-row: 1 / 3; position: relative; opacity: 0; transition: opacity .4s; }
.is-in .panel__art { opacity: 1; transition: opacity 1.2s .3s; }
.panel__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: right center; }
.flower { position: absolute; inset: -5rem -5rem -5rem -20vw; width: calc(100% + 5rem + 20vw); height: calc(100% + 10rem); }

.list li { font-size: 4rem; letter-spacing: -.035em; line-height: 1.15; }
.list li > span { position: relative; padding-left: 1.05em; }
.list b {
  position: absolute;
  left: 0; top: .5em;
  display: grid;
  place-items: center;
  width: 1.75em; height: 1.75em;
  border: 1px solid;
  border-radius: 50%;
  font-size: .35em;
  font-weight: 400;
}
.list i { font-style: normal; opacity: .6; margin-left: .3em; }

.foot {
  position: fixed;
  left: var(--pad); right: var(--pad); bottom: var(--pad);
  z-index: 11;
  display: flex;
  justify-content: space-between;
  font-size: 1.4rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.is-in-panel .foot a { pointer-events: auto; }
.is-in-panel .foot { opacity: 1; transition-delay: .6s; }

/* pills, after nrly.co's footer links: the button never changes size. Over it sits a wider
   strip holding a dark pill and a white one. On hover the dark pill's clip opens from the button's
   width to the full strip and its label slides in 20px, while the white pill's clip closes down
   to a dot on the left. expo.out, ~.7s in and ~.6s out. The white pill is 1px bigger all round
   than the dark one so no dark edge ever peeks past it. */
.pills {
  position: fixed;
  left: 0; right: 0; bottom: 5rem;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: opacity .6s, transform .8s var(--expo);
}
.pills > * { pointer-events: auto; }
.is-loading .pills { opacity: 0; transform: translateY(20px); }
.is-open .pills { opacity: 0; visibility: hidden; }
.pill {
  --cut: 0px;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --t: .6s;
  position: relative;
  display: flex;
  align-items: center;
  height: 2.25em;
  margin: 0 .4em;
  padding: 0 1em;
  color: transparent;
  font-size: 12px;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: nowrap;
  width: var(--w, auto);
  flex-shrink: 0;
  justify-content: center;
  transition: width var(--t) var(--ease);
}
.pill__out {
  position: absolute;
  top: 0; left: 50%;
  height: 100%;
  translate: -50% 0;
  pointer-events: none;
}
.pill__dark, .pill__face {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  clip-path: inset(0 var(--cut) round 999px);
  transition: clip-path var(--t) var(--ease);
}
.pill__dark { position: relative; height: 100%; padding: .1em 1em 0 1.8em; background: var(--ink); color: #fff; }
.pill__dark span { translate: 20px 0; transition: translate var(--t) var(--ease); }
.pill__face { inset: -1px; padding-top: .1em; background: #fff; color: var(--ink); }
.pill.is-hot { --t: .7s; z-index: 1; width: var(--wo, auto); }
.pill.is-hot .pill__dark { clip-path: inset(0 round 999px); }
.pill.is-hot .pill__dark span { translate: 0 0; }
.pill.is-hot .pill__face { clip-path: inset(calc(50% - .4125em) calc(100% - 1.525em) calc(50% - .4125em) .7em round 999px); }
.pill:focus-visible { outline-offset: 4px; }

/* panel close: same build, a round button pinned top right whose strip opens to the left */
.x--panel {
  position: fixed;
  top: var(--pad); right: var(--pad);
  z-index: 40;
  height: 48px;
  margin: 0;
  padding: 0;
  width: 48px;
  justify-content: center;
  font-size: 13px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s, visibility 0s .3s;
}
.x--panel .pill__out { left: auto; right: 0; translate: none; }
.x--panel .pill__dark { clip-path: inset(0 0 0 var(--cut) round 999px); }
.x--panel .pill__face { font-size: 18px; justify-content: flex-end; padding: 0 16px 0 0; clip-path: inset(0 0 0 var(--cut) round 999px); }
.x--panel.is-hot .pill__face { clip-path: inset(calc(50% - 5px) calc(100% - 1.2em - 10px) calc(50% - 5px) 1.2em round 999px); }
.is-in-panel .x--panel { opacity: 1; visibility: visible; transition: opacity .5s .2s; }

@media (min-width: 1280px) { .pill { font-size: 16px; } .x--panel { font-size: 14px; } }
@media (min-width: 2000px) { .pill { font-size: 18px; } }

/* lightbox */
.lb {
  position: fixed;
  inset: 0;
  z-index: 50;
  cursor: zoom-out;
  background: rgb(251 232 236 / 0);
  transition: background .6s var(--p3);
}
.lb.is-in { background: rgb(251 232 236 / .96); }
.lb img {
  position: absolute;
  transform-origin: 0 0;
  object-fit: contain;
  transition: transform 1s cubic-bezier(.87, 0, .13, 1);
  box-shadow: 0 1rem 4rem rgb(58 42 48 / .12);
}
.x--lb {
  position: absolute;
  top: var(--pad); right: var(--pad);
  width: 48px; height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s, transform .6s var(--expo), background .3s, color .3s;
}
.lb.is-in .x--lb { opacity: 1; transform: none; transition-delay: .5s, .5s, 0s, 0s; }
.x--lb svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; transition: transform .65s var(--expo); }
@media (hover: hover) { .x--lb:hover { background: var(--ink); color: #fff; } .x--lb:hover svg { transform: rotate(90deg); } }
.x--lb:active { transform: scale(.92); }

@media (orientation: portrait) {
  .card__name { font-size: 7rem; }
  .card--profile .card__name { font-size: 7.5rem; }
  .card__text, .card__link { font-size: 1.6rem; }
  .pills { left: 3rem; right: 3rem; bottom: 3rem; justify-content: space-between; }
  .panel { display: block; }
  .panel__title { font-size: 27.5vw; margin-top: 42vh; position: relative; }
  .panel__art { position: absolute; top: 0; left: 0; right: 0; height: 40vh; }
  .panel__art img { object-position: center; padding: 3rem 3rem 0; }
  .flower { inset: 0; width: 100%; height: 100%; }
  .panel__body { margin: 4rem 0 12rem; }
  .list li { font-size: 2.6rem; }
  .panel__body p { font-size: 1.6rem; }
  .foot { left: 0; right: 0; bottom: 0; padding: 4rem 3rem 2.5rem; font-size: 1.2rem; background: linear-gradient(transparent, var(--sheet) 45%); }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0ms !important; }
}


input, textarea { user-select: text; -webkit-user-select: text; }

/* drop cap: the first letter is set larger, italic, sunk a little below the line and given room */
.cap { display: inline-block; font-style: italic; font-size: 1.42em; line-height: .7; margin-right: .13em; vertical-align: -.1em; }
.card__name .ln, .panel__title .ln { padding-top: .35em; margin-top: -.35em; }