@font-face { font-family: "Anton"; src: url(assets/anton.woff2) format("woff2"); font-display: swap; }

:root {
  --ink: #070707;
  --paper: #eae9e5;
  --white: #f9f8f5;
  --rose-ink: #a94860;
}
* { margin: 0; box-sizing: border-box; }
html { background: var(--ink); overscroll-behavior-y: none; }
.top { position: fixed; z-index: 5; left: 0; right: 0; top: 0; height: env(safe-area-inset-top); background: var(--paper); pointer-events: none; }
body { display: flex; flex-direction: column; min-height: 100svh; color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.condensed { font-family: Impact, Anton, "Arial Narrow", sans-serif; font-weight: 400; text-transform: uppercase; }

.links > * { max-width: 448px; margin-left: auto; margin-right: auto; }
.links { padding: 64px 16px 28px; background: var(--paper); }
.heading { font-size: 15.4vw; white-space: nowrap; line-height: .84; letter-spacing: -.04em; margin-bottom: 26px; }

.list { border-top: 1px solid var(--ink); }
.card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 42px; column-gap: 12px; row-gap: 8px; align-items: center; align-content: center;
  padding: 16px 0; border-bottom: 1px solid var(--ink); }
.name, .label, .pill { transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.card:active .name, .card:active .label, .card:active .pill { transform: translateX(6px); }
.card:active .arrow { transform: rotate(45deg); background: var(--ink); color: var(--white); }
@media (hover: hover) {
  .card:hover .name, .card:hover .label, .card:hover .pill { transform: translateX(6px); }
  .card:hover .arrow { transform: rotate(45deg); background: var(--ink); color: var(--white); }
}

.name { display: block; font-size: clamp(29px, 7.7vw, 38px); line-height: .89; letter-spacing: -.032em; }
.pill { grid-column: 1; grid-row: 2; justify-self: start; padding: 7px 14px 6px; border: 1px solid currentColor;
  border-radius: 99px; font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.label { grid-column: 1; grid-row: 2; color: var(--rose-ink); font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; }
.arrow { grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 42px; height: 42px;
  border: 1px solid currentColor; border-radius: 50%; justify-self: end; transition: transform .3s, background .2s, color .2s; }
.arrow svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.statement { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 40px 16px calc(40px + env(safe-area-inset-bottom)); overflow: hidden; text-align: center; background: var(--ink); color: var(--white); }
.statement::before { content: ""; position: absolute; width: 80vw; max-width: 520px; aspect-ratio: 1; filter: blur(30px);
  background: radial-gradient(circle, rgba(243, 90, 142, .16), transparent 65%); }
.statement > * { position: relative; }
.statement h2 { margin: 0 0 9px; font-size: 17vw; line-height: .8; letter-spacing: -.05em; }
.statement h2 em { font-style: normal; -webkit-text-stroke: 1px #e0dcdc; color: transparent; }
.statement p { max-width: 420px; color: #b9b6b5; font-size: 12px; line-height: 1.5; }

@media (max-height: 740px) {
  .links { padding-top: 40px; }
  .heading { margin-bottom: 18px; }
  .card { padding: 12px 0; }
  .statement { padding-top: 28px; padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }