/* Short links ---------------------------------------------------- */

.link-form {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: start;
}
@media (max-width: 900px) { .link-form { grid-template-columns: 1fr; } }

.link-form__main, .link-form__aside { display: grid; gap: 1.75rem; }

.link-form__url {
  min-height: 4.25rem;
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 330;
  letter-spacing: -0.02em;
}
.link-form__url.is-invalid { border-color: var(--danger); }

.link-form__name { display: flex; align-items: center; gap: 0.5rem; }
.link-form__name .field__input { flex: 1; min-width: 0; }

.link-savings { display: grid; gap: 0.35rem; margin: 0; font-size: var(--step--1); }
.link-savings div { display: flex; justify-content: space-between; gap: 1rem; }
.link-savings dt { color: var(--muted); }
.link-savings dd { margin: 0; }
.link-savings__gain { padding-top: 0.45rem; border-top: 1px solid var(--rule); }
.link-savings__gain dd { color: var(--signal); }

/* The page behind arborisis.com/l/token+ */

.linkview { display: grid; gap: 2.5rem; padding-top: calc(var(--header-h) + clamp(2rem, 5vw, 4rem)); }

.linkcard {
  position: relative;
  display: grid;
  gap: 1.25rem;
  justify-items: start;
  max-width: 52rem;
  padding: clamp(1.5rem, 4vw, 3rem);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.linkcard__mark { color: var(--moss); }
.linkcard__eyebrow { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.linkcard__eyebrow .mono { color: var(--signal); letter-spacing: 0.04em; text-transform: none; }

.linkcard__title {
  margin: 0;
  font-size: var(--step-4);
  font-weight: 320;
  line-height: 1.05;
  letter-spacing: -0.04em;
  overflow-wrap: anywhere;
}
.linkcard__title em { color: var(--moss); }

.linkcard__url {
  margin: 0;
  max-width: 100%;
  padding: 0.8rem 1rem;
  border-radius: var(--radius);
  background: var(--paper-2);
  font-size: var(--step--1);
  overflow-wrap: anywhere;
}

.linkcard__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.linkcard__meta { display: flex; flex-wrap: wrap; gap: 0.3rem 1.25rem; margin: 0; font-size: var(--step--2); }
.linkcard__meta span + span::before { content: "·"; margin-right: 1.25rem; color: var(--signal); }

@media (max-width: 600px) {
  .linkcard__actions .button { flex: 1 1 100%; }
}

.qr--branded .qr__mark { color: var(--signal); }