/* The index an owner is sent: the property's name and three places to go. It
   borrows the vibe's type from site.css and nothing else. */
.idx { width: min(560px, 100%); margin-inline: auto; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: clamp(40px, 10vh, 96px) var(--gut); }
.idx__logo { align-self: flex-start; margin-bottom: clamp(32px, 7vh, 56px); opacity: .7; }
.idx__logo:hover { opacity: 1; }
.idx__logo img { display: block; height: 20px; width: auto; }
.idx h1 { font-size: calc(clamp(2.4rem, 7vw, 3.6rem) * var(--ds)); }
.idx__lede { margin-top: 10px; color: var(--muted); }
.idx__list { margin-top: clamp(28px, 5vh, 44px); border-top: 1px solid var(--line); }
.idx__list a { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.idx__n { font-size: 14px; color: var(--muted); }
.idx__t { font: var(--display-weight) calc(1.5rem * var(--ds))/1.2 var(--display); letter-spacing: var(--display-track); }
.idx__list a:hover .idx__t { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.idx__d { font-size: 14px; color: var(--muted); text-align: right; }
.idx__foot { margin-top: 20px; font-size: 13px; color: var(--muted); }
@media (max-width: 420px) {
  .idx__list a { grid-template-columns: 1.6rem minmax(0, 1fr); }
  .idx__d { grid-column: 2; text-align: left; }
}