/* ===== CREW LANDING (compact + minimal) — isolated ===== */
.crew-landing{ max-width:925px; margin:22px auto 28px; padding:0 16px; }
.crew-landing .intro{ text-align:center; max-width:62ch; margin:0 auto 18px; }

/* mini cards */
.crew-landing .landing-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(180px,1fr));
  gap:14px;
  margin-bottom:18px;
}
.crew-landing .landing-card{
  position:relative; background:#fcfcfb; border-radius:14px; padding:14px 16px;
  box-shadow:0 4px 12px rgba(70,56,104,.10);
  outline:1px solid rgba(0,0,0,.04);
  border:1px solid rgba(167,124,207,.18);
  text-align:center;
  transition: transform .12s ease, box-shadow .18s ease;
}
.crew-landing .landing-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(180deg, rgba(167,124,207,.06), transparent 40%); pointer-events:none;
}
.crew-landing .landing-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(70,56,104,.16), 0 0 0 3px rgba(90,201,180,.10) inset;
}
.crew-landing .landing-card i{
  font-size:1.25rem; color:#5ac9b4; display:block; margin-bottom:6px;
}
.crew-landing .landing-card a{
  font-family:'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700; letter-spacing:.4px; color:var(--text); text-decoration:none;
}
.crew-landing .landing-card a:hover{
  text-decoration-line:underline; text-decoration-style:dotted;
  text-underline-offset:6px; text-decoration-thickness:2px; color:var(--link-hover);
}

/* dropdown blocks for bred lists */
.crew-landing .crew-block{
  background:#fcfcfb; border-radius:14px; padding:14px 16px;
  outline:1px solid rgba(0,0,0,.04); border:1px solid rgba(167,124,207,.18);
  box-shadow:0 4px 12px rgba(70,56,104,.10); margin-top:14px;
}
.crew-landing .crew-block summary{
  cursor:pointer; list-style:none;
  font-family:'Raleway', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:700; text-transform:uppercase; letter-spacing:.06em; color: var(--title);
}
.crew-landing .crew-block summary::-webkit-details-marker{ display:none; }
.crew-landing .crew-block summary::after{
  content:"▾"; margin-left:8px; font-weight:700;
  color:color-mix(in srgb, var(--title) 70%, #000 30%);
}
.crew-landing .crew-block[open] summary::after{ content:"▴"; }

/* multi-column link list */
.crew-landing .link-list{
  margin:10px 0 0; padding:0; list-style:none;
  column-width:220px; column-gap:18px;
}
.crew-landing .link-list li{ break-inside:avoid; margin:6px 0; }
.crew-landing .link-list a{
  color: var(--link); text-decoration:none; border-bottom:1px dotted rgba(90,201,180,.45);
  font-weight:600;
}
.crew-landing .link-list a:hover{
  color: var(--link-hover); border-bottom-color: rgba(90,201,180,.75);
}

/* Bred Petz link hover accent (optional) */
.crew-landing .bred-list a {
  text-decoration: none;
  color: var(--accent-teal);
  border-bottom: 1px dotted transparent;
  transition: border-color 0.2s ease;
}
.crew-landing .bred-list a:hover { border-color: var(--accent-teal); }

/* make the entire tile clickable, but only underline the text label */
.crew-landing .landing-card {
  display:grid;
  place-items:center;
  text-align:center;
  padding:18px 14px;
  border-radius:14px;
  background:#fcfcfb;
  border:1px solid rgba(167,124,207,.18);
  outline:1px solid rgba(0,0,0,.04);
  box-shadow:0 4px 12px rgba(70,56,104,.10);
  transition: transform .12s ease, box-shadow .18s ease;
  text-decoration:none; /* no underline around tile */
  color:var(--text);
}
.crew-landing .landing-card:hover {
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(70,56,104,.16),
             0 0 0 3px rgba(90,201,180,.10) inset;
}
.crew-landing .landing-card i {
  font-size:1.25rem;
  color:#5ac9b4;
  margin-bottom:6px;
}
.crew-landing .landing-card .label {
  font-family:'Raleway',sans-serif;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
  text-decoration:none;
}
/* add the dotted underline only on hover or focus */
.crew-landing .landing-card:hover .label,
.crew-landing .landing-card:focus-visible .label {
  text-decoration-line:underline;
  text-decoration-style:dotted;
  text-underline-offset:6px;
  text-decoration-thickness:2px;
  color:var(--link-hover);
}